@remotion/player
Using the Remotion Player you can embed Remotion videos in any React app and customize the video content at runtime.
Demo
Play the video, then tweak the parameters below the video.
Enter your name:
Select your favorite color:
See the source code for this example.
Templates
The following templates include the Player and cloud rendering and are a good starting point for building a video app:
API
Guide
Installation
Install the Player into your project
Examples
Code samples for various scenarios
Sizing
Setting the size of the Player
Autoplay
Dealing with browser autoplay policies
Display time
Write a custom component for displaying the current time
Preloading assets
Make assets ready to play when they appear in the video
Best practices
Checklist of correct implementation
Buffer state
Pause the Player while assets are loading
Avoiding flickers
Troubleshooting for flickers due to unloaded assets
Premounting
Mount components earlier to allow them to load
Drag & Drop
Allow interactivity on the canvas
Custom controls
Recipes for custom Play buttons, volume sliders, etc.
Media Keys
Control what happens when users presses ⏯️
See also
preferredEffectBackend?v4.0.540
Prefer a backend for effects: "auto", "webgpu", "webgl2", or "2d". Default: "auto", which tries WebGPU, WebGL2, then 2D. The preference is scoped to this component. If an implementation or backend is unavailable, another implementation is used. See effect backend selection.