Installation
To install the Player, run the following command in a React project:
- Remotion CLI
- npm
- bun
- pnpm
- yarn
npx remotion add @remotion/player
This assumes you are currently using v4.0.417 of Remotion.npm i --save-exact @remotion/player@4.0.417
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.417 of Remotion.pnpm i @remotion/player@4.0.417
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.417 of Remotion.bun i @remotion/player@4.0.417
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.This assumes you are currently using v4.0.417 of Remotion.yarn --exact add @remotion/player@4.0.417
Also update
remotion and all `@remotion/*` packages to the same version.Remove all
^ character in front of the version numbers of it as it can lead to a version conflict.Components
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 ⏯️