Skip to main content

将 a <Player> 转变为 Remotion 项目

如果你有一个使用 <Player> 组件的 React 应用，你也可以将其转换为 Remotion 项目，而不必创建新的仓库。这将使你能够：

🌐 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:

使用 Remotion Studio
2
 本地渲染视频
2
 创建一个 Remotion Bundle 以便在云端渲染

说明​

🌐 Instructions

确保你还没有安装 Studio——在以下模板中，Studio 已经安装好，可以使用命令 npx remotion studio 启动:

安装 Remotion CLI：

npm i --save-exact @remotion/cli@4.0.431
This assumes you are currently using v4.0.431 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
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
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";

registerRoot(RemotionRoot);

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

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

🌐 The file that calls registerRoot() is now your Remotion entry point.

应用在 React 应用中常用的 Webpack 覆盖设置：

启动 Remotion Studio：​

🌐 Start the Remotion Studio:

npx remotion studio

渲染视频​

🌐 Render a video

使用渲染我们的视频

🌐 Render our a video using

npx remotion render remotion/index.ts

设置服务器端渲染​

🌐 Set up server-side rendering

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

🌐 See server-side rendering for more information.

我如何从 Remotion 播放器下载视频？​

🌐 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.

Last updated on