时间轴 – 渲染视频

<Timeline /> 组件位于一个示例 Vite 项目中，该项目是一个仅前端的应用。

🌐 The <Timeline /> component is in a sample Vite project, which is a frontend-only application.

如果你想把时间线的状态渲染成视频，你需要设置服务器端渲染。

🌐 If you want to render the state of your timeline into a video, you need to set up server-side rendering.

建议：使用后端框架

🌐 Recommendation: Use a backend framework

我们建议你使用我们的其中一个SaaS模板来创建一个同时包含前端和后端的Remotion项目。

🌐 We recommend that you use one of our Saas templates to setup a Remotion project that has both a frontend and backend.

如果你使用 Next.js 或 React Router 模板，然后将时间线组件复制到你的项目前端，会更容易。

🌐 It is easier if you use Next.js or React Router templates and copy the timeline component into your project frontend.

这些模板包含用于在 AWS Lambda 上渲染的有用样板代码。

🌐 These templates include useful boilerplate code for rendering on AWS Lambda.

创建 Remotion 项目文件

🌐 Create Remotion project files

按照 这些说明 将你的 <Player> 前端转换为 Remotion 项目。
如果你使用的是 SaaS 模板，你可能已经有这些文件，在这种情况下，你可以替换它们。

🌐 Follow these instructions for how to turn your <Player>-based frontend into a Remotion project.
If you are using a SaaS template, you might already have these files, in which case you can replace them.

使用时间轴状态

🌐 Using the Timeline state

在 src/timeline/video-preview.tsx 中，你可以看到时间线状态正被传递到 <Player> 组件。

🌐 In src/timeline/video-preview.tsx, you can see that the timeline state is being passed to the <Player> component.

每当你使用像 renderMediaOnLambda 或 renderMedia() 这样的 服务器端渲染 API 渲染视频时，确保指定 inputProps 选项，并传入与传给 <Player> 组件相同的负载。

🌐 Whenever you are rendering a video using the server-side rendering APIs like renderMediaOnLambda or renderMedia(), make sure you specify the inputProps option and pass in the same payload that you passed to the <Player> component.

请注意，该负载必须是可 JSON 序列化的，因此你不能传入函数或其他不可序列化的值。

🌐 Note that this payload must be JSON-serializable, so you cannot pass in functions or other non-serializable values.