Remotion Player

The @remotion/player package allows you to embed a video powered by Remotion in a React application.

Installation and prerequisites

The dependencies that Remotion requires you to have pre-installed on your machine are Node.js and FFMPEG. You can take a look at this guide on how to get FFMPEG on your machine.

Install this package and Remotion with the package manager that you use for project:

npm i remotion @remotion/player

yarn add remotion @remotion/player

pnpm i remotion @remotion/player

Make sure all Remotion packages you install (remotion, @remotion/player, @remotion/gif...) have the same version.

Getting started

Now that you have this package as a dependency in your React project, it is time to see some of the basic examples that you can spin up with this package.

The @remotion/player package can be imported as a React component from the library, which you can make use of in your components, either by nesting it in a custom component of yours or simply making it a standalone component.

// components/MyVideo.js
import React from 'react';
import {useCurrentFrame} from 'remotion';

const MyVideo = () => {
	const frame = useCurrentFrame();

	return (
		<div
			style={{
				flex: 1,
				textAlign: 'center',
				fontSize: '7em',
			}}
		>
			The current frame is {frame}.
		</div>
	);
};

import {Player} from '@remotion/player';
import {MyVideo} from '../components/MyVideo';

export const App = () => {
	return (
		<Player
			component={MyVideo}
			durationInFrames={120}
			compositionWidth={1920}
			compositionHeight={1080}
			fps={30}
		/>
	);
};

API

The most important props accepted:

| Props | Function | | ----------------- | ---------------------------------------- | | component | A React component that renders the video | | durationInFrames | The duration of the video in frames | | compositionHeight | The height of the composition in pixels | | compositionWidth | The width of the composition in pixels | | fps | The frame rate of the video |

For a complete reference of the available props, refer to @remotion/player API.