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() 来为您捆绑视频。

另请参阅