packages/docs/docs/html5-video.mdx
Wraps the native <video> element to include video in your component that is synchronized with Remotion's time.
:::note Prefer one of the other video tags which perform better. :::
:::warning Not supported in client-side rendering
<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead.
:::
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.
import {AbsoluteFill, staticFile, Html5Video} from 'remotion';
export const MyComposition = () => {
return (
<AbsoluteFill>
<Html5Video src={staticFile('video.webm')} />
</AbsoluteFill>
);
};
You can load a video from an URL as well:
import {AbsoluteFill, Html5Video} from 'remotion';
// ---cut---
export const MyComposition = () => {
return (
<AbsoluteFill>
<Html5Video src="https://remotion.media/BigBuckBunny.mp4" />
</AbsoluteFill>
);
};
srcThe URL of the video to be rendered. Can be a remote URL or a local file referenced with staticFile().
trimBefore?<AvailableFrom v="4.0.319"/>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.
import {AbsoluteFill, staticFile, Html5Video} from 'remotion';
// ---cut---
export const MyComposition = () => {
return (
<AbsoluteFill>
<Html5Video src={staticFile('video.webm')} trimBefore={60} trimAfter={120} />
</AbsoluteFill>
);
};
trimAfter?<AvailableFrom v="4.0.319"/>Removes a portion of the video at the end (right side). See trimBefore for an explanation.
startFrom?:::note Deprecated
This prop has been renamed to trimBefore in 4.0.319. It will continue to work but you cannot use it together with the new prop.
:::
endAt?:::note Deprecated
This prop has been renamed to trimAfter in 4.0.319. It will continue to work but you cannot use it together with the new prop.
:::
style?You can pass any style you can pass to a native <video> element. For example, set its size:
import {AbsoluteFill, staticFile, Html5Video} from 'remotion';
// ---cut---
export const MyComposition = () => {
return (
<AbsoluteFill>
<Html5Video src={staticFile('video.webm')} style={{height: 720, width: 1280}} />
</AbsoluteFill>
);
};
volume?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.
import {AbsoluteFill, staticFile, Html5Video} from 'remotion';
// ---cut---
export const MyComposition = () => {
return (
<AbsoluteFill>
<Html5Video volume={0.5} src={staticFile('video.webm')} />
</AbsoluteFill>
);
};
import {AbsoluteFill, interpolate, staticFile, Html5Video} from 'remotion';
// ---cut---
export const MyComposition = () => {
return (
<AbsoluteFill>
<Html5Video volume={(f) => interpolate(f, [0, 100], [0, 1], {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'})} src={staticFile('video.webm')} />
</AbsoluteFill>
);
};
By default, volumes between 0 and 1 are supported, where in iOS Safari, the volume is always 1.
See Volume Limitations for more information.
loopVolumeCurveBehavior?<AvailableFrom v="4.0.142" />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).
name?<AvailableFrom v="4.0.71"/>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.
playbackRate?<AvailableFrom v="2.2.0" />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.
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.
import {AbsoluteFill, staticFile, Html5Video} from 'remotion';
// ---cut---
export const MyComposition = () => {
return (
<AbsoluteFill>
<Html5Video playbackRate={2} src={staticFile('video.webm')} />
</AbsoluteFill>
);
};
:::note Playing a video in reverse is not supported. :::
muted?You can drop the audio of the video by adding a muted prop:
import {AbsoluteFill, Html5Video} from 'remotion';
// ---cut---
export const MyComposition = () => {
return (
<AbsoluteFill>
<Html5Video muted src="https://remotion.media/BigBuckBunny.mp4" />
</AbsoluteFill>
);
};
This has the benefit that Remotion will not have to download the video file during rendering in order to extract the audio from it.
loop?<AvailableFrom v="3.2.29" />Makes the video loop indefinitely.
import {AbsoluteFill, Html5Video} from 'remotion';
// ---cut---
export const MyComposition = () => {
return (
<AbsoluteFill>
<Html5Video loop src="https://remotion.media/BigBuckBunny.mp4" />
</AbsoluteFill>
);
};
:::note
When a video ends (and loop is not set), the last frame of the video remains visible by default.
This is because Remotion mounts a <video> tag and sets ref.currentTime = frame / fps to synchronize with the timeline. When currentTime is set to a value larger than the video's duration, the HTML5 <video> element displays the last frame.
:::
acceptableTimeShiftInSeconds?<AvailableFrom v="3.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.
toneFrequency?<AvailableFrom v="4.0.47"/>Adjust the pitch of the audio - will only be applied during rendering.
Accepts a number between 0.01 and 2, where 1 represents the original pitch. Values less than 1 will decrease the pitch, while values greater than 1 will increase it.
A toneFrequency of 0.5 would lower the pitch by half, and a toneFrequency of 1.5 would increase the pitch by 50%.
audioStreamIndex?<AvailableFrom v="4.0.340" />Select the audio stream to use. The default is 0.
import {AbsoluteFill, Html5Video} from 'remotion';
// ---cut---
export const MyComposition = () => {
return (
<AbsoluteFill>
<Html5Video audioStreamIndex={1} src={'https://remotion.media/multiple-audio-streams.mov'} />
</AbsoluteFill>
);
};
:::note
This prop only works during rendering.
Browsers do not support selecting the audio track without enabling experimental flags.
Not to be confused with audio channels. A video can have multiple audio streams, each stream can have multiple channels.
Multiple audio streams can be used for example for adding multiple languages to a video.
Audio streams are zero-indexed. :::
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.
pauseWhenBuffering?<AvailableFrom v="4.0.100"/>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?<AvailableFrom v="4.0.122"/>If set to false, no layer will be shown in the timeline of the Remotion Studio. The default is true.
delayRenderTimeoutInMilliseconds?<AvailableFrom v="4.0.140" />Customize the timeout of the delayRender() call that this component makes.
delayRenderRetries?<AvailableFrom v="4.0.140" />Customize the number of retries of the delayRender() call that this component makes.
onAutoPlayError?<AvailableFrom v="4.0.187" />A callback function that gets called when the video fails to play due to autoplay restrictions.
If you don't pass a callback, the video will be muted and be retried once.
This prop is useful if you want to handle the error yourself, e.g. for pausing the Player.
Read more here about autoplay restrictions.
crossOrigin?<AvailableFrom v="4.0.190" />Corresponds to the crossOrigin attribute of the <video> element.
One of "anonymous", "use-credentials" or undefined.
Default: "anonymous" if onVideoFrame is specified, undefined, otherwise.
useWebAudioApi?<AvailableFrom v="4.0.306" />Enable the Web Audio API for the video tag.
allowAmplificationDuringRender?<AvailableFrom v="3.3.17" />Deprecated since v4.0.279: This prop intended to opt into setting the volume to a value higher than one, even though it would only apply during render.
The option does not make sense anymore, because it is now possible to set the volume higher than 1.
To prevent synthetic amplification, set a volume not higher than 1.
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.
See: Which video formats does Remotion support?
<OffthreadVideo> and @remotion/media<OffthreadVideo> is a Rust-based alternative to <Html5Video>.
@remotion/media is an experimental component that will replace <Html5Video> at some point.
To decide which tag to use, see: Comparison of video tags