Video player proPro
A player for editors: frame steps, J K L shuttle, in and out points that loop, speed, a timecode that cycles to clock and frame number, and a scrub bar that previews the frame under the pointer.
On this page
ProAn 8 s take with a loop range. Hover the bar for the frame under the pointer; J, K and L shuttle, comma and period step a frame.
Installation
Usage
import { VideoPlayerPro } from "@/components/ui/chatcn/pro/video-player-pro"
import { videoClip } from "@/lib/chatcn-pro-video-b"
const take = videoClip("/renders/take-3.mp4")
<VideoPlayerPro source={take} label="Take 3" />Pass videoClip(url) for a file (same origin or CORS enabled) or stillClip({ src, move }) for a still that performs a camera move. Time, playing, speed, loop and range are each controlled or uncontrolled. ClipView and PlayerControls are exported for building your own surfaces.
Examples
States
ProLoading, failed, nothing yet, frame numbers at half speed and disabled.
Props
| Prop | Type | Notes |
|---|---|---|
source | ClipSource | From videoClip or stillClip |
time, playing, rate, loop, range | Controlled or default*, each with an on*Change | |
format | "timecode" | "clock" | "frames" | The readout. Click it to cycle |
thumbnails, markers | Hover previews and ticks on the bar | |
status, error, onRetry | Override the clip's own state | |
labels, disabled |
Keyboard
| Key | Action |
|---|---|
Space or K | Play or pause |
J, L | Shuttle back or forward; again to go 2x, 4x, 8x |
K held with J or L | Step one frame |
, . or the arrows | Step a frame, Shift for a second |
I, O, X | Set in, set out, clear |
F, M | Full screen, mute |
Accessibility
- The player is a group named by
label; the frame is a play button. - The scrub bar is a slider whose value text says the time and the frame.
- Shuttle, loop and range changes are announced politely.
Motion
- Frames are drawn as they are, never eased. The canvas fades in over 200 ms once the clip loads; the loading label waits 300 ms.
- Playback the viewer starts plays under reduced motion; nothing autoplays.