Skip to main content

将 <Player> 转换为 Remotion 项目

如果您有一个使用 <Player> 组件的 React 应用程序,您可以将其转换为 Remotion 项目,而无需创建新的存储库。这将使您能够:

使用 Remotion Studio


本地渲染视频


创建一个允许在云中渲染的 Remotion Bundle

指令

确保您尚未安装 Studio - 在以下模板中,Studio 已经安装并可以使用命令 npx remotion studio 启动:



安装 Remotion CLI:

npm i --save-exact @remotion/cli@4.0.206
npm i --save-exact @remotion/cli@4.0.206
This assumes you are currently using v4.0.206 of Remotion.
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 的新文件夹,并在其中添加以下两个文件:



remotion/Root.tsx
tsx
import React from 'react';
import {Composition} from 'remotion';
import {MyComposition} from './Composition';
 
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
id="Empty"
// Import the component and add the properties you had in the `<Player>` before
component={MyComposition}
durationInFrames={60}
fps={30}
width={1280}
height={720}
/>
</>
);
};
remotion/Root.tsx
tsx
import React from 'react';
import {Composition} from 'remotion';
import {MyComposition} from './Composition';
 
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
id="Empty"
// Import the component and add the properties you had in the `<Player>` before
component={MyComposition}
durationInFrames={60}
fps={30}
width={1280}
height={720}
/>
</>
);
};
remotion/index.ts
ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
registerRoot(RemotionRoot);
remotion/index.ts
ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
registerRoot(RemotionRoot);

将您先前在 <Player> 中注册的组件也添加到 <Composition> 中。
如有必要,将组件移动到 remotion 目录中。

调用 registerRoot() 的文件现在是您的 Remotion 入口点

应用通常在 React 应用程序中启用的常见 Webpack 覆盖:



启动 Remotion Studio:

npx remotion studio
npx remotion studio

渲染视频

使用以下命令渲染视频:

npx remotion render remotion/index.ts
npx remotion render remotion/index.ts

设置服务器端渲染

有关更多信息,请参阅服务器端渲染

如何从 Remotion Player 下载视频?

首先需要渲染视频 - 这只能在服务器上完成。有关更多信息,请参阅渲染方式服务器端渲染