Components / Video Trimmer
Video Trimmer
iOS-style clip trimming: a filmstrip of thumbnails with draggable start and end handles, plus a slidable selection region.
import { VideoTrimmer } from '@layers/ui/video-trimmer'No live demo
A live demo needs a bundled video to build its filmstrip of paused frames, which this site does not ship; see it in the product clip editing flow.
House rules
- Thumbnails are native video elements paused at seek points, so there is no canvas work and no CORS requirement on the video URL.
- Trims clamp between 3 seconds and maxDuration (default 20); defaultDuration (default 10) applies on first load, and long videos cap at maxTimelineLength.
- onChange receives whole-second start and end times.
- Styles ship with the component (video-trimmer.css is self-imported).