JSPM

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:

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