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

Decoding

Frames decode through WebCodecs, and the decoder adapts to how the layer is read. Playing forward — which is every export — decodes each packet at most once. Playing in reverse (speed below zero) decodes forward windows and serves them backwards. Scrubbing re-seeks, which is unavoidable.

This matters more than it sounds. A seek re-decodes from the preceding keyframe, so stepping through a clip one frame at a time costs O(frames × GOP): on a 1080p H.264 clip with the 250-frame GOP a stock encode produces, that is 207 ms per frame against 15.6 ms decoding the same frames in order.

Nothing to configure. A source whose codec has no WebCodecs decoder on the current platform falls back to a <video> element automatically, so unusual formats still render — just more slowly.