Installation

To install the Player, run the following command in a React project:

npm

npm i --save-exact @remotion/player@4.0.242

npm i --save-exact @remotion/player@4.0.242

yarn

pnpm i @remotion/player@4.0.242

pnpm i @remotion/player@4.0.242

pnpm

bun i @remotion/player@4.0.242

bun i @remotion/player@4.0.242

bun

yarn --exact add @remotion/player@4.0.242

yarn --exact add @remotion/player@4.0.242

This assumes you are currently using v4.0.242 of Remotion.
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

<Player>

Embed a Remotion composition in a web app

<Thumbnail>

Embed a still in a web app

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 ⏯️