Remotion | Make videos programmatically

Remotion – 使用React以编程方式创建视频

什么是Remotion？

Remotion是一个视频创作框架，让开发者能够使用React组件构建高质量的视频。你通过编写代码而非使用时间线编辑器来创建视频。视频是逐帧渲染的，从而完全控制布局、动画和数据驱动的内容。

为什么使用Remotion？

• 基于代码的视频生成：使用React/JavaScript创建动态视觉效果、运动图形和动画。
• 完全可组合性：重用组件、模板，并与CSS、SVG、Canvas、WebGL集成。
• 可扩展的渲染选项：本地渲染、服务器端渲染或通过Remotion Lambda等云服务渲染。
• 企业级功能：包括团队许可选项、优先支持和大规模使用。

核心特性

• React帧渲染：使用useCurrentFrame()和useVideoConfig()控制每一帧显示的内容。
• 组合：在一个项目中定义多个具有不同尺寸、持续时间和帧率的“视频”。
• 时间线和编辑器启动器：包括内置时间线UI、多层、胶片条预览、拖放、缩放和基本编辑。
• 丰富的API支持：访问组件如<Video>、<Audio>、<Image>，插值函数（interpolate、spring等），Lottie，Three.js集成。
• 数据驱动和动态内容：使用API调用、JSON数据或外部源生成个性化或自动化视频（例如YouTube Wrapped风格）。

如何开始

1. 安装前提条件：Node.js ≥ 16或Bun ≥ 1.0.3。

2. 搭建新项目：

   npx create-video@latest
   

   或使用pnpm、yarn或bun。

3. 运行开发环境：

   npm run dev
   

   或npm run remotion打开Remotion Studio。

4. 在src/Root.tsx中定义你的<Composition />组件，指定宽度、高度、持续时间和帧率。

5. 在你的组合中，使用React组件和动画钩子（useCurrentFrame、useVideoConfig）随时间渲染视觉效果。

6. 渲染最终输出：

   npx remotion render [composition-id] [output-file.mp4]
   

7. 对于云渲染或自动化，探索Remotion Lambda或类似的服务器端工具。

使用技巧

• 使用通过代码的动画：interpolate、spring、interpolateColors提供精确控制。
• 使用可重用的React组件构建复杂的视觉效果。
• 使用内置工作室频繁预览以加快迭代速度。
• 对于可扩展的渲染，连接云或服务器工具——非常适合自动化的动态活动。

常见问题

问：Remotion是免费的吗？
答：免费许可证涵盖个人使用和最多3名开发者。团队（4人以上）或公司需要付费的公司或企业许可证（起价100-500美元/月），享有优先支持和积分。

问：React代码如何变成视频？
答：Remotion给你一个帧号和空白画布。它通过执行你的React组件渲染每一帧，然后使用Puppeteer + FFMPEG或WebCodecs将它们拼接成完整的MP4视频。

问：Remotion与Motion Canvas相比如何？
答：Remotion使用完整的DOM树与React进行渲染，而Motion Canvas通过单个<canvas>上下文和命令式API工作。Remotion支持嵌入复杂的Web内容，而Motion Canvas优化了矢量动画。Remotion提供可扩展性和企业功能；Motion Canvas更简单且完全开源。

问：我需要GUI吗？
答：不需要。你编写React代码来构建你的视频。Remotion Studio提供了一个视觉界面用于预览和编辑，但所有逻辑都存在于代码中。

问：我可以获取数据并动态生成视频吗？
答：可以。你可以集成API、JSON或运行时数据以编程方式生成视频（例如每周的个性化剪辑）。