<Video>
Wraps the native <video>
element to include video in your component that is synchronized with Remotion's time.
Prefer <OffthreadVideo>
which during render is faster and supports more codecs.
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 constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")} /></AbsoluteFill >);};
tsx
import {AbsoluteFill ,staticFile ,Video } from "remotion";export constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")} /></AbsoluteFill >);};
You can load a video from an URL as well:
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" /></AbsoluteFill >);};
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" /></AbsoluteFill >);};
Props
startFrom
Will remove a portion of the video at the beginning.
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 constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")}startFrom ={60}endAt ={120} /></AbsoluteFill >);};
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")}startFrom ={60}endAt ={120} /></AbsoluteFill >);};
endAt
Removes a portion of the video at the end. See startFrom
for an explanation.
style
You can pass any style you can pass to a native <video>
element. For example, set its size:
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video src ={staticFile ("video.webm")}style ={{height : 720,width : 1280 }}/></AbsoluteFill >);};
tsx
export constMyComposition = () => {return (<AbsoluteFill ><Video 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.
Example using static volumetsx
export constMyComposition = () => {return (<AbsoluteFill ><Video volume ={0.5}src ={staticFile ("video.webm")} /></AbsoluteFill >);};
Example using static volumetsx
export constMyComposition = () => {return (<AbsoluteFill ><Video volume ={0.5}src ={staticFile ("video.webm")} /></AbsoluteFill >);};
Example of a ramp up over 100 framestsx
export constMyComposition = () => {return (<AbsoluteFill ><Video volume ={(f ) =>interpolate (f , [0, 100], [0, 1], {extrapolateLeft : "clamp" })}src ={staticFile ("video.webm")}/></AbsoluteFill >);};
Example of a ramp up over 100 framestsx
export constMyComposition = () => {return (<AbsoluteFill ><Video volume ={(f ) =>interpolate (f , [0, 100], [0, 1], {extrapolateLeft : "clamp" })}src ={staticFile ("video.webm")}/></AbsoluteFill >);};
On iOS Safari, it's not possible to granularly change the volume of a media tag.
Only values 0
and 1
will be respected by the browser.
loopVolumeCurveBehavior
v4.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
v4.0.71
optional
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
v2.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
.
Example of a video playing twice as fasttsx
export constMyComposition = () => {return (<AbsoluteFill ><Video playbackRate ={2}src ={staticFile ("video.webm")} /></AbsoluteFill >);};
Example of a video playing twice as fasttsx
export constMyComposition = () => {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 videotsx
export constMyComposition = () => {return (<AbsoluteFill ><Video muted src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"/></AbsoluteFill >);};
Example of a muted videotsx
export constMyComposition = () => {return (<AbsoluteFill ><Video muted src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/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
v3.2.29
Makes the video loop indefinitely.
Example of a looped videotsx
export constMyComposition = () => {return (<AbsoluteFill ><Video loop src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"/></AbsoluteFill >);};
Example of a looped videotsx
export constMyComposition = () => {return (<AbsoluteFill ><Video loop src ="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"/></AbsoluteFill >);};
acceptableTimeShiftInSeconds
v3.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.
allowAmplificationDuringRender
v3.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.
toneFrequency
v4.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%.
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
v4.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
v4.0.122
If set to false
, no layer will be shown in the timeline of the Remotion Studio. The default is true
.
delayRenderTimeoutInMilliseconds
v4.0.140
Customize the timeout of the delayRender()
call that this component makes.
delayRenderRetries
v4.0.140
Customize the number of retries of the delayRender()
call that this component makes.
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>