Caption editorPro
A caption track with timing handles, split and merge, and a burn in toggle.
On this page
ProFive cues on a product clip, one too fast to read.
Installation
Usage
import { CaptionEditor } from "@/components/ui/chatcn/pro/caption-editor"
<CaptionEditor cues={cues} onCuesChange={setCues} duration={14.5} currentTime={time} onSeek={seek} burnIn={burnIn} onBurnInChange={setBurnIn} preview={<video src={clip} />} />Drag a cue's edges on the timeline; edges stop at their neighbors and keep cues at least 0.4 s long. Split cuts a cue where the caret is and divides its time by the text on each side. Cues above the reading speed limit are flagged with their characters per second.
Examples
States
ProBurned in, and no captions yet.
Props
| Prop | Type | Notes |
|---|---|---|
cues, onCuesChange | { id, start, end, text }[] | Controlled |
duration, currentTime, onSeek | number | Seconds |
burnIn, onBurnInChange | boolean | Drawn into the video or a separate track |
preview | ReactNode | The video under the caption |
maxReadingSpeed | number | Characters per second. Default 20 |
Accessibility
- Each cue edge is a slider: arrow keys move it 0.1 s, Shift moves 1 s.
- The reading speed flag has an icon and words, not only a tint.