Skip to main content

Trimming, delaying and looping

<Video> and <Audio> share the same timing props. For how these props compose and interact with playback speed, see Timing and trimming.

Trimming​

Use trimBefore to skip the beginning of a source and durationInFrames to select how much of it to play. Both values are measured in frames at the composition's frame rate.

This example plays the source from 2 to 4 seconds. At the default playback speed, it occupies the first 2 seconds of the composition:

MyComposition.tsx
import {Video} from '@remotion/media';
import {staticFile, useVideoConfig} from 'remotion';

export const MyComposition = () => {
  const {fps} = useVideoConfig();

  return <Video src={staticFile('video.mp4')} trimBefore={2 * fps} durationInFrames={2 * fps} />;
};

Delaying​

Use from to start media later on the timeline. It changes when the clip appears, without skipping any source content.

This example starts playing at 2 seconds into the composition:

MyComposition.tsx
import {Video} from '@remotion/media';
import {staticFile, useVideoConfig} from 'remotion';

export const MyComposition = () => {
  const {fps} = useVideoConfig();

  return <Video src={staticFile('video.mp4')} from={2 * fps} />;
};

You can combine from with trimBefore and durationInFrames to place a trimmed clip later in the composition.

Looping​

Use loop to repeat media until its parent ends. Without an explicit durationInFrames, the media's intrinsic duration determines the end of the source range.

To repeat a specific section, combine loop with trimBefore and durationInFrames. This example repeats the source range from 2 to 4 seconds:

MyComposition.tsx
import {Video} from '@remotion/media';
import {staticFile, useVideoConfig} from 'remotion';

export const MyComposition = () => {
  const {fps} = useVideoConfig();

  return <Video src={staticFile('video.mp4')} trimBefore={2 * fps} durationInFrames={2 * fps} loop />;
};

See also​