Video and Audio

Use <Video> and <Audio> from @remotion/media to add media to your composition. Both components support the same controls for timing, playback speed, volume and pitch.

Put video.mp4 and music.mp3 in your public folder to play a video with 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>
);

The video's own audio is included. Add muted to <Video> to hear only the background music.

Shared controls

Adding video and audio

Use local files, remote URLs and multiple tracks.

Trimming, delaying and looping

Select a source range and place it on the timeline.

Controlling playback speed

Speed up or slow down media and preserve its pitch.

Controlling volume and muting

Adjust levels, fade sound in and out, or mute it.

Controlling pitch

Raise or lower the pitch of a video's or audio file's sound.

Matching composition duration

Set the composition's duration from a video or audio file.

Video techniques

Size and position

Fit a video into your layout.

Playing videos in sequence

Play clips one after another.

Transparent videos

Embed videos with transparency.

Color correction

Adjust colors and apply a color grade.

Greenscreen

Remove a background color.

Manipulating pixels

Process individual video frames.

Jump cuts

Skip unwanted sections of a video.

Changing speed over time

Use an <OffthreadVideo> recipe for gradual speed changes.

Different segments at different speeds

Set a playback speed for each section.

Using video as a Three.js texture

Play a video on a 3D surface.

Audio techniques

Visualizing audio

Create waveforms and music visualizers.

Sound effects

Add sound effects to your composition.

Formats and compatibility

Choosing a media component

Compare media components and their fallbacks.

HLS

Play an HLS playlist.

ProRes

Enable ProRes decoding.

Media fragments

Control media fragment hints for native video tags.

API reference

• <Video>
• <Audio>