Skip to main content

<Video>

This component allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.

API​

Put a video file into the public/ folder and use staticFile() to reference it.

All the props that the native <video> element accepts (except autoplay and controls) will be forwarded (but of course not all are useful for Remotion). This means you can use all CSS to style the video.

tsx
import { AbsoluteFill, staticFile, Video } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile("video.webm")} />
    </AbsoluteFill>
  );
};
tsx
import { AbsoluteFill, staticFile, Video } from "remotion";
 
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile("video.webm")} />
    </AbsoluteFill>
  );
};

You can load a video from an URL as well:

tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};

startFrom / endAt​

<Video> has two more helper props you can use:

  • startFrom will remove a portion of the video at the beginning
  • endAt will remove a portion of the video at the end

In the following example, we assume that the fps of the composition is 30.

By passing startFrom={60}, the playback starts immediately, but with the first 2 seconds of the video trimmed away.
By passing endAt={120}, any video after the 4 second mark in the file will be trimmed away.

The video will play the range from 00:02:00 to 00:04:00, meaning the video will play for 2 seconds.

tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile("video.webm")} startFrom={60} endAt={120} />
    </AbsoluteFill>
  );
};
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile("video.webm")} startFrom={60} endAt={120} />
    </AbsoluteFill>
  );
};

style​

You can pass any style you can pass to a native <video> element. This is how you set it's size for example:

tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video
        src={staticFile("video.webm")}
        style={{ height: 720, width: 1280 }}
      />
    </AbsoluteFill>
  );
};
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video
        src={staticFile("video.webm")}
        style={{ height: 720, width: 1280 }}
      />
    </AbsoluteFill>
  );
};

volume​

<Video> accepts a volume prop which allows you to control the volume for the whole track or change it on a per-frame basis. Refer to the using audio guide to learn how to use it.

Example using static volume
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video volume={0.5} src={staticFile("video.webm")} />
    </AbsoluteFill>
  );
};
Example using static volume
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video volume={0.5} src={staticFile("video.webm")} />
    </AbsoluteFill>
  );
};
Example of a fade in over 100 frames
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video
        volume={(f) =>
          interpolate(f, [0, 100], [0, 1], { extrapolateLeft: "clamp" })
        }
        src={staticFile("video.webm")}
      />
    </AbsoluteFill>
  );
};
Example of a fade in over 100 frames
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video
        volume={(f) =>
          interpolate(f, [0, 100], [0, 1], { extrapolateLeft: "clamp" })
        }
        src={staticFile("video.webm")}
      />
    </AbsoluteFill>
  );
};

playbackRatev2.2.0​

You can use the playbackRate prop to control the speed of the video. 1 is the default and means regular speed, 0.5 slows down the video so it's twice as long and 2 speeds up the video so it's twice as fast.

While Remotion doesn't limit the range of possible playback speeds, in development mode the HTMLMediaElement.playbackRate API is used which throws errors on extreme values. At the time of writing, Google Chrome throws an exception if the playback rate is below 0.0625 or above 16.

Example of a video playing twice as fast
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video playbackRate={2} src={staticFile("video.webm")} />
    </AbsoluteFill>
  );
};
Example of a video playing twice as fast
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video playbackRate={2} src={staticFile("video.webm")} />
    </AbsoluteFill>
  );
};

muted​

You can drop the audio of the video by adding a muted prop:

Example of a muted video
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video
        muted
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </AbsoluteFill>
  );
};
Example of a muted video
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video
        muted
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </AbsoluteFill>
  );
};

loopv3.2.29​

You can use the loop prop to loop a video.

Example of a looped video
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video
        loop
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </AbsoluteFill>
  );
};
Example of a looped video
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video
        loop
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
      />
    </AbsoluteFill>
  );
};

acceptableTimeShiftInSecondsv3.2.42​

In the Studio or in the Remotion Player, Remotion will seek the video if it gets too much out of sync with Remotion's internal time - be it due to the video loading or the page being too slow to keep up in real-time. By default, a seek is triggered if 0.45 seconds of time shift is encountered. Using this prop, you can customize the threshold.

allowAmplificationDuringRenderv3.3.17​

Make values for volume greater than 1 result in amplification during renders.
During Preview, the volume will be limited to 1, since the browser cannot amplify audio.

onError​

Handle an error playing the video. From v3.3.89, if you pass an onError callback, then no exception will be thrown. Previously, the error could not be caught.

Speed up renders for video with silent audio​

Remotion will download the whole video during render in order to mix its audio. If the video contains a silent audio track, you can add the muted property to signal to Remotion that it does not need to download the video and make the render more efficient.

Codec support​

See: Which video formats does Remotion support?

Alternative: <OffthreadVideo>​

<OffthreadVideo> is a drop-in alternative to <Video>. To decide which tag to use, see: <Video> vs <OffthreadVideo>

See also​