Video layers
Add a video clip to the timeline. VideoFlow reads its duration (if autoDetectDurations is on), decodes frames on demand, and lets you trim, offset, and animate transforms over it.
const $ = new VideoFlow({ width: 512, height: 512, fps: 30, backgroundColor: '#000' });
const clip = $.addVideo(
{ fit: 'cover' },
{ source: 'https://videoflow.dev/samples/sample.mp4' },
);
$.wait('4s');
clip.remove();
return $;const clip = $.addVideo(
{ fit: 'cover', volume: 0.8, mute: false },
{
source: 'https://videoflow.dev/samples/sample.mp4',
sourceStart: '2s', // skip the first 2s of the source
},
);
clip.animate({ scale: 1 }, { scale: 1.05 }, { duration: '10s', easing: 'linear', wait: false });
// Stop the clip after 10s of timeline play instead of letting it run to its
// own end. .remove() is the preferred way to bound a media layer's duration.
$.wait('10s');
clip.remove();Properties
| Prop | Type / default | Notes |
|---|---|---|
source (setting) | string | MP4 / WebM / MOV. Must be decodable by the chosen renderer. |
sourceStart (setting) | Time / 0 | In source-media seconds. |
sourceEnd (setting) | Time / 0 | Trim from the END of the source (source seconds). |
sourceDuration (setting) | Time | Auto-detected from the file. Set it only when you need to clip a sub-segment. |
speed (setting) | number / 1 | Playback speed multiplier. |
volume | 0–1 / 1 | Animatable. |
mute | boolean | — |
fit | cover | contain / cover | How the video sizes to the project canvas. |
position / anchor / scale / rotation | Animatable. | |
opacity / filterBlur / filterBrightness | Animatable. |
sourceStart: '5s' and then animate(from, to, { duration: '3s' }), the animation runs from source 5s → source 8s.