Video Player
A player for finished clips: in a results feed, a review step, or side by side for a video edit. Controls float over the bottom of the clip.
In use
The Video Studio's finished clip, with markers at the keyframe seconds. Generate a clip to see it.
Your image will appear here
Your image will appear here
Your image will appear here
Your image will appear here
Paint over what to change. Tab reaches the marks: arrow keys move one, Enter edits its note, Delete removes it.
Your video will appear here
Installation
Installs the Scrub Bar too.
pnpm dlx shadcn@latest add https://mgp.paukraft.com/r/video-player.jsonVideoPlayer
| Prop | Type | Default |
|---|---|---|
| src | stringThe clip, e.g. a FLUX 3 Video result's sample URL. | — |
| aspectRatio | number | stringA number, CSS "16 / 9", or the API's "16:9". Set it to hold the space before the clip loads. | — |
| markers | ReactNodeOn the scrub bar's track, e.g. ScrubBarMarkers at keyframe times. | — |
| ...props | <video> propsOn the video, e.g. loop, muted, autoPlay, poster. | — |
Parts
| Prop | Type | Default |
|---|---|---|
| VideoPlayerRoot | <div> props & { aspectRatio }The frame, with playback state. What fullscreen covers. Carries data-error while the clip fails to load. | — |
| VideoPlayerVideo | <video> propsThe clip. A click plays or pauses it. | — |
| VideoPlayerError | <div> propsOver the frame when the clip fails to load, e.g. an expired URL, with a retry that reloads it. Children replace the message. | — |
| VideoPlayerControls | <div> propsThe bar over the bottom of the clip. On hover devices it hides while playing and idle; hidden while the clip has failed. | — |
| VideoPlayerPlay / Mute / Fullscreen | Button propsToggles. Ghost and icon-sm by default. | — |
| VideoPlayerScrubBar | ScrubBar propsThe Scrub Bar wired to the clip. Children go on its track. | — |
| VideoPlayerTime | <span> propsElapsed and total, e.g. "0:02.4 / 0:05.0". | — |
| VideoPlayerProvider | { children }Playback state without the frame, for parts placed elsewhere. Within another provider it shares that one's clip. | — |
| useVideoPlayer | () => MediaState & { video }For your own controls. | — |
useMediaState
useMediaState(video) keeps any <video> or <audio> in state. The player, the Video Gen Loader and the Clip Trimmer run on it.
| Prop | Type | Default |
|---|---|---|
| playing / muted | booleanWhether it's playing, and whether it's muted. | — |
| currentTime | numberSeconds; follows playback every frame. | — |
| duration | numberSeconds; 0 until known. | — |
| buffered | TimeRange[]Loaded spans, for the Scrub Bar. | — |
| error | booleanThe clip failed to load. Cleared when it reloads. | — |