Turn a <Player> into a Remotion project
If you have a React app that uses the <Player>
component, you can turn it also into a Remotion project without having to create a new repository. This will enable you to:
Instructions
npx remotion studio
:
- npm
- yarn
- pnpm
- bun
npm i --save-exact @remotion/cli@4.0.217
npm i --save-exact @remotion/cli@4.0.217
pnpm i @remotion/cli@4.0.217
pnpm i @remotion/cli@4.0.217
bun i @remotion/cli@4.0.217
bun i @remotion/cli@4.0.217
yarn --exact add @remotion/cli@4.0.217
yarn --exact add @remotion/cli@4.0.217
Also update
remotion
and all `@remotion/*`
packages to the same version.Remove all
^
character in front of the version numbers of it as it can lead to a version conflict.remotion
and add these two files in
it:
remotion/Root.tsxtsx
importReact from 'react';import {Composition } from 'remotion';import {MyComposition } from './Composition';export constRemotionRoot :React .FC = () => {return (<><Composition id ="Empty"// Import the component and add the properties you had in the `<Player>` beforecomponent ={MyComposition }durationInFrames ={60}fps ={30}width ={1280}height ={720}/></>);};
remotion/Root.tsxtsx
importReact from 'react';import {Composition } from 'remotion';import {MyComposition } from './Composition';export constRemotionRoot :React .FC = () => {return (<><Composition id ="Empty"// Import the component and add the properties you had in the `<Player>` beforecomponent ={MyComposition }durationInFrames ={60}fps ={30}width ={1280}height ={720}/></>);};
remotion/index.tsts
import {registerRoot } from "remotion";import {RemotionRoot } from "./Root";registerRoot (RemotionRoot );
remotion/index.tsts
import {registerRoot } from "remotion";import {RemotionRoot } from "./Root";registerRoot (RemotionRoot );
Add the component you previously registered in the <Player>
also to the <Composition>
.
If necessary, move the components into the remotion
directory.
The file that calls registerRoot()
is now your Remotion entry point.
Start the Remotion Studio:
npx remotion studio
npx remotion studio
Render a video
Render our a video using
npx remotion render remotion/index.ts
npx remotion render remotion/index.ts
Set up server-side rendering
See server-side rendering for more information.
How do I download a video from the Remotion Player?
The video first needs to get rendered - this can only be done on the server. See ways to render and server-side rendering for more information.