Component documentation
SGUI / Development
Native accessible media controls with optional seek restrictions and observed viewing coverage.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
This sample media file is included in the documentation app. Supply your own media and caption URLs in your application.
'use client';
import { useState } from 'react';
import {VideoPlayer, AnswerFeedback, type VideoTrack} from '@structured-growth/sg-ui';
export default function VideoExample() {
const [complete, setComplete] = useState(false);
const tracks: VideoTrack[] = [{"src":"/media/conversation-demo.vtt","srcLang":"en","label":"English","kind":"captions","default":true}];
return (
<>
<VideoPlayer key="free-100-0" src={"/media/conversation-demo.webm"} label={"A moment to consider"} tracks={tracks} seekPolicy="free" requiredWatchPercent={100} minimumViewingSeconds={0} showProgress={false} pauseWhenHidden={false} transcript={"A silent 30-second demonstration. The screen reads “A moment to pause and consider.” A progress bar fills from left to right."} onComplete={() => setComplete(true)} />
{complete && <AnswerFeedback title="Viewing requirement met">Completion is local to this example. The host owns durable records.</AnswerFeedback>}
</>
);
}
This sample media file is included in the documentation app. Supply your own media and caption URLs in your application.
'use client';
import { useState } from 'react';
import {VideoPlayer, AnswerFeedback, type VideoTrack} from '@structured-growth/sg-ui';
export default function VideoExample() {
const [complete, setComplete] = useState(false);
const tracks: VideoTrack[] = [{"src":"/media/conversation-demo.vtt","srcLang":"en","label":"English","kind":"captions","default":true}];
return (
<>
<VideoPlayer key="watched-80-0" src={"/media/conversation-demo.webm"} label={"A moment to consider"} tracks={tracks} seekPolicy="watched" requiredWatchPercent={80} minimumViewingSeconds={0} showProgress={true} pauseWhenHidden={false} transcript={"A silent 30-second demonstration. The screen reads “A moment to pause and consider.” A progress bar fills from left to right."} onComplete={() => setComplete(true)} />
{complete && <AnswerFeedback title="Viewing requirement met">Completion is local to this example. The host owns durable records.</AnswerFeedback>}
</>
);
}
This sample media file is included in the documentation app. Supply your own media and caption URLs in your application.
'use client';
import { useState } from 'react';
import {VideoPlayer, AnswerFeedback, type VideoTrack} from '@structured-growth/sg-ui';
export default function VideoExample() {
const [complete, setComplete] = useState(false);
const tracks: VideoTrack[] = [{"src":"/media/conversation-demo.vtt","srcLang":"en","label":"English","kind":"captions","default":true}];
return (
<>
<VideoPlayer key="none-80-0" src={"/media/conversation-demo.webm"} label={"A moment to consider"} tracks={tracks} seekPolicy="none" requiredWatchPercent={80} minimumViewingSeconds={0} showProgress={true} pauseWhenHidden={false} transcript={"A silent 30-second demonstration. The screen reads “A moment to pause and consider.” A progress bar fills from left to right."} onComplete={() => setComplete(true)} />
{complete && <AnswerFeedback title="Viewing requirement met">Completion is local to this example. The host owns durable records.</AnswerFeedback>}
</>
);
}
This sample media file is included in the documentation app. Supply your own media and caption URLs in your application.
'use client';
import { useState } from 'react';
import {VideoPlayer, AnswerFeedback, type VideoTrack} from '@structured-growth/sg-ui';
export default function VideoExample() {
const [complete, setComplete] = useState(false);
const tracks: VideoTrack[] = [{"src":"/media/conversation-demo.vtt","srcLang":"en","label":"English","kind":"captions","default":true}];
return (
<>
<VideoPlayer key="free-100-0" src={"data:video/webm;base64,SGVsbG8="} label={"A moment to consider"} tracks={tracks} seekPolicy="free" requiredWatchPercent={100} minimumViewingSeconds={0} showProgress={false} pauseWhenHidden={false} transcript={"A silent 30-second demonstration. The screen reads “A moment to pause and consider.” A progress bar fills from left to right."} onComplete={() => setComplete(true)} />
{complete && <AnswerFeedback title="Viewing requirement met">Completion is local to this example. The host owns durable records.</AnswerFeedback>}
</>
);
}