将 <Player> 转换为 Remotion 项目
如果您有一个使用 <Player>
组件的 React 应用程序,您可以将其转换为 Remotion 项目,而无需创建新的存储库。这将使您能够:
1 使用 Remotion Studio
2 本地渲染视频
2 创建一个允许在云中渲染的 Remotion Bundle
指令
1 确保您尚未安装 Studio - 在以下模板中,Studio 已经安装并可以使用命令 npx remotion studio
启动:
2 安装 Remotion CLI:
- npm
- yarn
- pnpm
- bun
npm i --save-exact @remotion/cli@4.0.206
npm i --save-exact @remotion/cli@4.0.206
pnpm i @remotion/cli@4.0.206
pnpm i @remotion/cli@4.0.206
bun i @remotion/cli@4.0.206
bun i @remotion/cli@4.0.206
yarn --exact add @remotion/cli@4.0.206
yarn --exact add @remotion/cli@4.0.206
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.3 创建一个名为 remotion
的新文件夹,并在其中添加以下两个文件:
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 );
将您先前在 <Player>
中注册的组件也添加到 <Composition>
中。
如有必要,将组件移动到 remotion
目录中。
调用 registerRoot()
的文件现在是您的 Remotion 入口点。
4 应用通常在 React 应用程序中启用的常见 Webpack 覆盖:
启动 Remotion Studio:
npx remotion studio
npx remotion studio
渲染视频
使用以下命令渲染视频:
npx remotion render remotion/index.ts
npx remotion render remotion/index.ts
设置服务器端渲染
有关更多信息,请参阅服务器端渲染。