Skip to main content

<NewVideo>

warning

Very experimental: This component is in a very early stage and does not support some basic features such as volume or playback rate or CSS styling. The current focus is on correctness, not on performance.

We recommend that you use <OffthreadVideo/> for now.

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.

Example​

tsx
import {AbsoluteFill, staticFile} from 'remotion';
import {experimental_NewVideo as NewVideo} from '@remotion/video';
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <NewVideo src={staticFile('video.webm')} />
    </AbsoluteFill>
  );
};

You can load a video from an URL as well:

tsx
export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <NewVideo 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>
      <NewVideo 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?​

Currently not supported!

loopVolumeCurveBehavior?​

Currently not supported!

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?​

Currently 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>
      <NewVideo muted src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
    </AbsoluteFill>
  );
};

acceptableTimeShiftInSeconds?​

Pending removal: Future iterations will also have client-side playback and not support this prop which was designed for the <video> tag.

pauseWhenBuffering?​

If set to true and the video is loading, the Player will enter into the native buffering state. The default is false, but will become true in Remotion 5.0.

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.

onAutoPlayError?​

Pending removal: Future iterations will also have client-side playback and not support this prop which was designed for the <video> tag.

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.

crossOrigin?v4.0.190​

Pending removal: Future iterations will also have client-side playback and not support this prop which was designed for the <video> tag.

useWebAudioApi?v4.0.306​

Pending removal: Future iterations will also have client-side playback and not support this prop which was designed for the <video> tag.

See also​