Skip to main content

Adding video and audio

Use <Video> and <Audio> from @remotion/media to add video and sound to your composition.

Using a local file​

Put your media in the public folder and reference it with staticFile().

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

export const MyComposition = () => {
  return <Video src={staticFile('video.mp4')} />;
};

Using a URL​

Pass a remote URL as src. The server must allow cross-origin requests.

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

export const MyComposition = () => {
  return <Video src="https://remotion.media/BigBuckBunny.mp4" />;
};

By default, media starts at frame 0 and plays at its original speed and full volume.

Adding background music​

Add multiple media components to mix their audio together. This example plays a video with quieter, looping background music:

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

export const MyComposition = () => (
  <AbsoluteFill>
    <Video src={staticFile('video.mp4')} />
    <Audio src={staticFile('music.mp3')} volume={0.2} loop />
  </AbsoluteFill>
);

Audio from video​

A video's audio is included automatically. The same controls for volume, muting, speed and pitch apply to both <Video> and <Audio>. To replace a video's sound with background music, add muted to <Video> in the example above.

Trimming​

Use trimBefore and durationInFrames to select a source range. See Trimming, delaying and looping.

Delaying​

Use from to start media later in the composition. See Delaying.

Size and Position​

Use CSS to size and position a video.

Volume​

Use volume to adjust levels and muted to silence media. See Controlling volume and muting.

Speed​

Use playbackRate to speed up or slow down media. See Controlling playback speed.

Looping​

Use loop to repeat media. See Looping.

GIFs​

See Using GIFs.

See also​