Using the Remotion Player you can embed Remotion videos in any React app and customize the video content at runtime.
Play the video, then tweak the parameters below the video.
Enter your name:
Select your favorite color:
To install the player, run the following command in a React project:
A React component which takes the following props
Pass a React component in directly or pass a function that returns a dynamic import. Passing neither or both of the props is an error.
The duration of the video in frames. Must be an integer and greater than 0.
The frame rate of the video. Must be a number.
The width of the composition in pixels.
The height of the composition in pixels.
Whether the video should restart when it ends. Default
Whether the video should start immediately after loaded. Default
Whether the video should display a seek bar and a play/pause button. Default
Whether the video should display a volume slider and a mute button. Only has an effect if
controls is also set to true. Default
Whether the video can go fullscreen. By default
A boolean property defining whether you can play, pause or resume the video with a single click into the player. Default
controls are true, otherwise
A boolean property defining whether you can go fullscreen and exit fullscreen in the video with double click into the player. If enabled, clicking on the video once will delay pausing the video for 200ms to wait for a possible second click. Default
Pass props to the component that you have specified using the
component prop. The Typescript definition takes the shape of the props that you have given to your
style prop for a HTMLDivElement. You can pass a different height and width if you would like different dimensions for the player than the original composition dimensions.
You may attach a ref to the player and control it in an imperative manner.
The following methods are available on the player ref:
Pause the video. Nothing happens if the video is already paused.
Play the video. Nothing happens if the video is already playing.
Pauses the video if it's playing. Plays the video if it's paused.
Gets the current postition expressed as the current frame. Divide by the
fps you passed to get the time in seconds.
Mutes the video.
Unmutes the video.
Gets the volume of the video. The volume is a value between 0 and 1 and is initially 1.
Set the volume of the video. Must be a value between 0 and 1, otherwise an exception will be thrown.
Returns a boolean specifying whether the video is muted.
Move the position in the video to a specific frame. If the video is playing, it will pause for a brief moment, then start playing again after the seek is completed.
Returns a boolean whether the video is currently playing in fullscreen.
To observe the fullscreen state and react to changes, listen to the
fullscreenchange event on the global document.
Requests the video to go to fullscreen. This method throws if the
allowFullscreen prop is false or the browser doesn't support allow the player to go into fullscreen.
Exit fullscreen mode.
Start listening to an event. See the Events section to see the function signature and the available events.
Stop listening to an event. See the Events section to see the function signature and the available events.
Using a player ref, you can bind event listeners to get notified of certain events of the player.
Fired when the time position changes. You may get the current frame by reading it from
This event fires on every single frame update. If you link it to a state update, you may want to throttle the updates to avoid expensive rendering operations.
Fires when the video has ended and looping is disabled.
Fires when the video has started playing or has resumed from a pause.
Fires when the video has paused or ended.
Fires when an error or uncaught exception has happened in the video.
You may get the error by reading the
Since videos are written in React, they are prone to crashing.
When a video throws an exception, you may handle the error using the
The video will unmount and show an error UI, but the host application (The React app which is embedding the player) will not crash.
It is up to you to handle the error and to re-mount the video (for example by changing the
key prop in React).
This feature is implemented using an error boundary, so only errors in the render function will be caught. Errors in event handlers and asynchronous code will not be reported and will not cause the video to unmount.
Before we mark the player as stable, we are looking to improve in the following areas:
- Better loading state than the current "Loading..." text.
- Implement keyboard controls.
- Customize error UI