Skip to main content

代码共享

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

note

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

模板​

使用我们的一个起始模板：

这些模板已经设置好了 Player 和 Lambda。

手动设置​

使用您喜欢的设置在 官方 React 文档 中设置一个 React 项目。常见的选择包括：

note

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

当您的项目设置完成后，添加必要的 Remotion 依赖项：

bash
npm i remotion @remotion/cli @remotion/player
bash
npm i remotion @remotion/cli @remotion/player

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

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

您的组件（例如remotion/MyComp.tsx）可能如下所示：

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

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

tsx
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'}}
      />
    </>
  );
};
tsx
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）可能如下所示：

tsx
import {registerRoot} from 'remotion';
import {MyVideo} from './Video';
 
registerRoot(MyVideo);
tsx
import {registerRoot} from 'remotion';
import {MyVideo} from './Video';
 
registerRoot(MyVideo);
tip

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

使用 Remotion Studio​

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

bash
npx remotion studio src/remotion/index.ts
bash
npx remotion studio src/remotion/index.ts
note

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

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

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

将 <Player /> 添加到您的应用程序​

在应用程序的任何位置，导入 <Player /> 组件和您的 Composition 组件。

tsx
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
    />
  );
};
tsx
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 属性。不要传递组合列表。

如果一切正常，您现在可以运行您的 web 应用程序并预览您的视频。

为服务器端渲染创建捆绑包​

在任何 Node.JS 上下文中，您可以调用 bundle() 来使用 Webpack 捆绑您的视频并在服务器端渲染视频。为此，您需要将 @remotion/bundler 添加到您的 package.json 中。

server.tsx
ts
import path from 'path';
import {bundle} from '@remotion/bundler';
 
const bundled = await bundle(
  path.join(process.cwd(), 'src', 'remotion', 'index.ts'),
);
server.tsx
ts
import path from 'path';
import {bundle} from '@remotion/bundler';
 
const bundled = await bundle(
  path.join(process.cwd(), 'src', 'remotion', 'index.ts'),
);

查看服务器端渲染以获取完整示例。

tip

在使用 Lambda 时，您不需要这样做，您可以使用 CLI 或 deploySite() 来为您捆绑视频。

另请参阅​