Examples for @remotion/player

Bare example

tsx
import { Player } from"@remotion/player";
import { MyVideo } from"./remotion/MyVideo";
exportconstApp:React.FC= () => {
return (
 <Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
 />
 );
};

Adding controls

tsx
import { Player } from"@remotion/player";
import { MyVideo } from"./remotion/MyVideo";
exportconstApp:React.FC= () => {
return (
 <Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
controls
 />
 );
};

Loop video

tsx
import { Player } from"@remotion/player";
import { MyVideo } from"./remotion/MyVideo";
exportconstApp:React.FC= () => {
return (
 <Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
controls
loop
 />
 );
};

Changing size

tsx
import { Player } from"@remotion/player";
import { MyVideo } from"./remotion/MyVideo";
exportconstApp:React.FC= () => {
return (
 <Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
controls
loop
style={{
 width: 1280,
 height: 720,
 }}
 />
 );
};

note

See Scaling for more ways to scale the Player.

Adding autoplay

tsx
import { Player } from"@remotion/player";
import { MyVideo } from"./remotion/MyVideo";
exportconstApp:React.FC= () => {
return (
 <Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
controls
loop
style={{
 width: 1280,
 height: 720,
 }}
autoPlay
 />
 );
};

tip

You need to be wary of the browser's autoplay policy. In most browsers, you cannot autoplay an audio file or a video with audio.

Programmatically control the player

tsx
import { Player, PlayerRef } from"@remotion/player";
import { useCallback, useRef } from"react";
import { MyVideo } from"./remotion/MyVideo";
exportconstApp:React.FC= () => {
constplayerRef=useRef<PlayerRef>(null);
constseekToMiddle=useCallback(() => {
const { current } = playerRef;
if (!current) {
return;
 }
 current.seekTo(60);
 }, []);
return (
 <Player
ref={playerRef}
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
 />
 );
};

Listen to events

tsx
import { Player, PlayerRef } from"@remotion/player";
import { useEffect, useRef } from"react";
import { MyVideo } from"./remotion/MyVideo";
exportconstApp:React.FC= () => {
constplayerRef=useRef<PlayerRef>(null);
useEffect(() => {
const { current } = playerRef;
if (!current) {
return;
 }
constlistener= () => {
 console.log("paused");
 };
 current.addEventListener("pause", listener);
return () => {
 current.removeEventListener("pause", listener);
 };
 }, []);
return (
 <Player
ref={playerRef}
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
 />
 );
};

Interactive player

tsx
import { Player } from"@remotion/player";
import { useState, useMemo } from"react";
import { MyVideo } from"./remotion/MyVideo";
exportconstApp:React.FC= () => {
// Connect the state to a text field
const [text, setText] =useState("world");
constinputProps=useMemo(() => {
return {
 text,
 };
 }, [text]);
return (
 <Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
inputProps={inputProps}
 />
 );
};

Only play a portion of a video

tsx
import { Player } from"@remotion/player";
import { MyVideo } from"./remotion/MyVideo";
exportconstApp:React.FC= () => {
return (
 <Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
loop
inFrame={30}
outFrame={60}
 />
 );
};

Loading a component lazily

tsx
import { Player } from"@remotion/player";
import { useCallback } from"react";
exportconstApp:React.FC= () => {
constlazyComponent=useCallback(() => {
returnimport("./remotion/MyVideo");
 }, []);
return (
 <Player
lazyComponent={lazyComponent}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
loop
 />
 );
};

Bare example​

Adding controls​

Loop video​

Changing size​

Adding autoplay​

Programmatically control the player​

Listen to events​

Interactive player​

Only play a portion of a video​

Loading a component lazily​

See also​

Bare example

Adding controls

Loop video

Changing size

Adding autoplay

Programmatically control the player

Listen to events

Interactive player

Only play a portion of a video

Loading a component lazily

See also