Skip to main content

代码共享

如果你正在使用播放器，一个常见的需求是将代码与你的 Remotion Studio 和/或服务器端渲染共享。通过正确的设置，你可以只编写一次组件，并将其用于预览、显示和渲染。

🌐 If you are using the player, a common desire is to share the code with your Remotion Studio and/or server-side rendering. With the correct setup, you can write the component once and use it for previewing, displaying and rendering.

note

Remotion 和你的 React 应用使用不同的 Webpack 配置。因此，如果你想要覆盖你的 Webpack 配置，你需要同时覆盖 Remotion 的配置和 React 应用的配置。

模板​

🌐 Template

使用我们的一个入门模板：

🌐 Use one of our starter templates:

已经设置好 Player 和 Lambda 的那些。

🌐 which have the Player and Lambda already set up.

手动设置​

🌐 Manual setup

根据你喜欢的设置从官方 React 文档建立一个 React 项目。流行的选择有：

🌐 Set up a React project with your preferred setup from the Official React docs. Popular choices are:

note

虽然你仍然可以使用 Create React App，但 React 团队不再积极推荐它。

当你的项目设置好后，添加必要的 Remotion 依赖：

🌐 When your project is setup, add the necessary Remotion dependencies:

npm i remotion @remotion/cli @remotion/player

之后，在你的项目中为 Remotion 创建一个子文件夹，并添加三个文件：一个索引文件，一个用于你的合成列表的 Root.tsx 文件，以及一个包含你的合成的文件。它可能看起来像这样：

🌐 Afterwards, create a subfolder for Remotion within your project and add three files: An index file, a Root.tsx file for your list of compositions, and a file with your composition. It could look like this:

 └── src/
+  ├── remotion/
+  │   ├── index.ts
+  │   ├── MyComp.tsx
+  │   └── Root.tsx
   └── app/
       └── App.tsx

你的作文（例如中的 remotion/MyComp.tsx）可以看起来像这样：

🌐 Your composition (remotion/MyComp.tsx in the example) could look for example like this:

export const MyComp: React.FC<{text: string}> = ({text}) => {
  return <div>Hello {text}!</div>;
};

你的视频列表（示例中的 remotion/Root.tsx）可能如下所示：

🌐 Your list of videos (remotion/Root.tsx in the example) could look like this:

import {Composition} from 'remotion';
import {MyComp} from './MyComp';

export const MyVideo = () => {
  return (
    <>
      <Composition component={MyComp} durationInFrames={120} width={1920} height={1080} fps={30} id="my-comp" defaultProps={{text: 'World'}} />
    </>
  );
};

你的索引文件（在示例中为 remotion/index.ts）可能如下所示：

🌐 Your index file (remotion/index.ts in the example) could look like this:

import {registerRoot} from 'remotion';
import {MyVideo} from './Video';

registerRoot(MyVideo);
tip

不要将这些语句合并到一个文件中，因为你可能会破坏热重载。

使用 Remotion Studio​

🌐 Using the Remotion Studio

你可以使用 npx remotion studio 命令打开 Remotion Studio：

🌐 You can open the Remotion Studio using the npx remotion studio command:

npx remotion studio src/remotion/index.ts
note

在 v4.0 之前，命令是 npx remotion preview。

我们建议在你的 package.json 中添加一个新脚本以便于访问：

🌐 We recommend adding a new script into your package.json for easy access:

  "scripts": {
+    "remotion": "remotion studio src/remotion/index.ts"
  }

将 <Player /> 添加到你的应用中​

🌐 Adding <Player /> to your app

在你的应用中的任何地方，导入 <Player /> 组件和你的组合组件。

🌐 Anywhere in your app, import the <Player /> component and your Composition component.

import {Player} from '@remotion/player';
import {MyComp} from './remotion/MyComp';

export const App: React.FC = () => {
  return (
    <Player
      component={MyComp}
      inputProps={{text: 'World'}}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
      style={{
        width: 1280,
        height: 720,
      }}
      controls
    />
  );
};
note

直接将你的 React 组件传递给 component 属性。不要传递组合列表。

如果一切正常，你现在可以运行你的网络应用并预览你的视频。

🌐 If everything worked, you can now run your webapp and preview your video.

为服务器端渲染创建一个打包包​

🌐 Creating a bundle for server-side rendering

在任何 Node.JS 环境中，你都可以调用 bundle() 使用 Webpack 打包你的视频，并在服务器端渲染视频。你需要在你的 package.json 中添加 @remotion/bundler 来实现这一点。

🌐 In any Node.JS context, you can call bundle() to bundle your video using Webpack and to server-side render the video. You need to add @remotion/bundler to your package.json for this.

server.tsx
import path from 'path';
import {bundle} from '@remotion/bundler';

const bundled = await bundle(path.join(process.cwd(), 'src', 'remotion', 'index.ts'));

请参见 服务器端渲染 获取完整示例。

🌐 See Server-side rendering for a full example.

tip

使用 Lambda 时，你不需要这个，你可以使用 CLI 或 deploySite()，它会为你打包视频。

另请参阅​

🌐 See also

Last updated on