Skip to main content

Examples for @remotion/player

Bare example

tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
return (
<Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
/>
);
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: 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";
 
export const App: React.FC = () => {
return (
<Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
controls
/>
);
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: 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";
 
export const App: React.FC = () => {
return (
<Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
controls
loop
/>
);
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: 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";
 
export const App: React.FC = () => {
return (
<Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
controls
loop
style={{
width: 1280,
height: 720,
}}
/>
);
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: 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";
 
export const App: React.FC = () => {
return (
<Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
controls
loop
style={{
width: 1280,
height: 720,
}}
autoPlay
/>
);
};
tsx
import { Player } from "@remotion/player";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: 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";
 
export const App: React.FC = () => {
const playerRef = useRef<PlayerRef>(null);
 
const seekToMiddle = useCallback(() => {
const { current } = playerRef;
if (!current) {
return;
}
current.seekTo(60);
}, []);
 
return (
<Player
ref={playerRef}
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
/>
);
};
tsx
import { Player, PlayerRef } from "@remotion/player";
import { useCallback, useRef } from "react";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
const playerRef = useRef<PlayerRef>(null);
 
const seekToMiddle = 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";
 
export const App: React.FC = () => {
const playerRef = useRef<PlayerRef>(null);
 
useEffect(() => {
const { current } = playerRef;
if (!current) {
return;
}
 
const listener = () => {
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}
/>
);
};
tsx
import { Player, PlayerRef } from "@remotion/player";
import { useEffect, useRef } from "react";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
const playerRef = useRef<PlayerRef>(null);
 
useEffect(() => {
const { current } = playerRef;
if (!current) {
return;
}
 
const listener = () => {
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 } from "react";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
// Connect the state to a text field
const [text, setText] = useState("world");
 
return (
<Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
inputProps={{
text,
}}
/>
);
};
tsx
import { Player } from "@remotion/player";
import { useState } from "react";
import { MyVideo } from "./remotion/MyVideo";
 
export const App: React.FC = () => {
// Connect the state to a text field
const [text, setText] = useState("world");
 
return (
<Player
component={MyVideo}
durationInFrames={120}
compositionWidth={1920}
compositionHeight={1080}
fps={30}
inputProps={{
text,
}}
/>
);
};

Only play a portion of a video

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

See also