Skip to main content

<Video>

note

This is documentation for the upcoming new <Video> tag.
Not to be confused with the older <Video> tag from remotion.

warning

Experimental: This component is in an early stage and not yet feature complete. We recommend that you use <OffthreadVideo /> for now.

See the progress of this component on our issue tracker.

This component imports and displays a video, similar to <OffthreadVideo/> but during rendering, extracts the exact frame from the video using Mediabunny and displays it in a <canvas> tag.

This component has native buffering support enabled by default. When used in the Player, it automatically pauses playback when buffering and resumes when ready.

Example​

tsx
import {AbsoluteFill, staticFile} from 'remotion';
import {experimental_Video as Video} from '@remotion/media';
 
export const MyVideo = () => {
  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>
  );
};

Props​

src​

The URL of the video to be rendered. Can be a remote URL or a local file referenced with staticFile().

trimBefore?​

Will remove a portion of the video at the beginning (left side).

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

By passing trimBefore={60}, the playback starts immediately, but with the first 2 seconds of the video trimmed away.
By passing trimAfter={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.

For exact behavior, see: Order of operations.

tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile('video.webm')} trimBefore={60} trimAfter={120} />
    </AbsoluteFill>
  );
};

trimAfter?​

Removes a portion of the video at the end (right side). See trimBefore for an explanation.

volume?​

Allows you to control the volume of the audio in it's entirety or frame by frame.
Read the page on using audio to learn more.

Setting a static volume
tsx
import {AbsoluteFill, staticFile} from 'remotion';
import {experimental_Video as Video} from '@remotion/media';
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Video volume={0.5} src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};
Changing the volume over time
tsx
import {AbsoluteFill, interpolate, staticFile} from 'remotion';
import {experimental_Video as Video} from '@remotion/media';
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Video volume={(f) => interpolate(f, [0, 30], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} src={'https://remotion.media/video.mp4'} />
    </AbsoluteFill>
  );
};

name?​

A name and that will be shown as the label of the sequence in the timeline of the Remotion Studio. This property is purely for helping you keep track of items in the timeline.

onError?​

Currently not supported!

playbackRate?v4.0.354​

Controls 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.

Example of a video playing twice as fast
tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video playbackRate={2} src={'https://remotion.media/video.mp4'} />
    </AbsoluteFill>
  );
};
note

Playing a video in reverse is not supported.

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>
  );
};

style?​

You can pass any style you can pass to a native HTML <canvas> element.

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

loop?​

Makes the video loop indefinitely.

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>
  );
};

loopVolumeCurveBehavior?v4.0.354​

Controls the frame which is returned when using the volume callback function and adding the loop attribute.

Can be either "repeat" (default, start from 0 on each iteration) or "extend" (keep increasing frames).

showInTimeline?​

If set to false, no layer will be shown in the timeline of the Remotion Studio. The default is true.

delayRenderTimeoutInMilliseconds?​

Customize the timeout of the delayRender() call that this component makes.

delayRenderRetries?​

Customize the number of retries of the delayRender() call that this component makes.

onVideoFrame?​

A callback function that gets called when a frame is extracted from the video.
Useful for video manipulation.
The callback is called with a CanvasImageSource object, more specifically, either an ImageBitmap or a VideoFrame.

audioStreamIndex?​

Select the audio stream to use. The default is 0.

tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video audioStreamIndex={1} src={'https://remotion.media/multiple-audio-streams.mov'} />
    </AbsoluteFill>
  );
};
note

Currently only works during rendering.
Planning to support it during preview as well.

disallowFallbackToOffthreadVideo?v3.0.356​

By default, if the video cannot be embedded using this tag, a fallback to <OffthreadVideo> will be attempted.

Pass this prop to disable the fallback and fail the render instead.

See also​