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 下载视频？​

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