Player

You can embed your videos into your website using the Revideo react player.

Setup

Install the @revideo/player-react package into your project:

npm install @revideo/player-react

Usage

The player takes your Revideo project - the object created with makeProject() and exported from your project file - through its project prop:

import {Player} from '@revideo/player-react';
import project from './project';
 
<Player project={project} />;

Because the player renders your project in the browser, your project file (and the scenes it imports) needs to be part of your web app’s build. For a complete setup that wires a Revideo project into a NextJS app - including passing variables and previewing changes in real time - see our SaaS Template .

Props

project

Project

The Revideo project to play, created with makeProject().

controls (optional)

boolean

Disables the player controls when set to false. default=true

variables (optional)

Record<string, any>

Parameters / or variables passed to your video. See here learn more about parameterized videos. default={}

playing (optional)

boolean

Specifies if the player is currently playing. default=false

currentTime (optional)

number

Current time of the player in seconds.

volume (optional)

number

Playback volume between 0 and 1. default=1

looping (optional)

boolean

Controls whether the to loop back to the beginning when the player reaches the end of the video. default=true

fps (optional)

number

The frame rate at which the player renders. default=30

width (optional)

number

Width of the underlying canvas element in pixels. It’s recommended to leave this setting empty as it crops the scene instead of stretching it. default=undefined

height (optional)

number

See width. default=undefined

quality (optional)

number

Reduces or increases the resolution of the canvas element without affecting the positioning of elements. default=undefined

onDurationChange (optional)

(duration: number) => void

Gets called every time the duration of the video changes (this can happen due to the input variables changing).

onTimeUpdate (optional)

(time: number) => void

Gets called every time the current time of the video is changed (every few ms during playback). Useful when visualizing the progress of the player outside of the player component.

timeDisplayFormat (optional)

'MM:SS' | 'MM:SS.m' | 'MM:SS.mm'

Determines how time is displayed on the player. default='MM:SS'

onPlayerReady (optional)

(player: Player) => void

Gets called with the underlying core Player instance once it is ready. Useful for controlling playback programmatically.

onPlayerResize (optional)

(rect: DOMRectReadOnly) => void

Gets called whenever the player’s canvas is resized, with the new bounding rectangle.