Skip to main content

Remotion 4.0

· 9 min read
Jonny Burger
Jonny Burger
Remotion首席黑客

欢迎来到迄今为止最大的 Remotion 更新！
通过 Remotion 4.0，我们为每个工作流程提供了显著的改进。



在每天的新视频中发现 Remotion 4.0 的新功能。

介绍 Remotion Studio​

我们为 Remotion 预览添加了方便的功能 - 因此，它不仅仅是一个预览！因此，我们将其重命名为：欢迎使用 Remotion Studio。

交互式编辑 props​

现在可以将合成的 props 定义为 Zod 模式。
这样做不仅会使您的 defaultProps 具有类型安全性，还可以让您在 Remotion Studio 中编辑它们。

使用图形界面直接编辑数字、字符串、数组、对象、枚举和日期。甚至可以可视化和编辑嵌套数据结构。

一旦您对所做的更改满意，甚至可以将 props 保存回您的项目。这适用于任意 JSON 数据。

阅读更多：可视化编辑

渲染按钮​

现在，您可以通过按下按钮来渲染资源，而不是输入 CLI 命令。

图形界面允许您发现和调整渲染的所有选项。您可以在 Remotion Studio 中跟踪渲染的进度，排队多个渲染，并在文件资源管理器中查看输出。

通过 UI 触发的每个渲染也可以像往常一样在 CLI 中进行跟踪，并与 Remotion Studio 的其他实例同步。
失败的渲染会显示堆栈跟踪，并允许使用相同配置重试。

在 Remotion Studio 中编辑的属性也可以用于使用渲染按钮渲染视频 - 这意味着您现在可以通过填写表单而不必触碰任何代码来渲染参数化视频。

了解更多：7 月 5 日：渲染按钮

由 Rust 驱动的架构​

Remotion 4.0 配备了一个 Rust 二进制文件，可以加速当前和未来的功能。

内置 FFmpeg​

现在安装 FFmpeg 已经不再必要，因为每个 Remotion 项目都附带了一个微小版本的 FFmpeg。

我们消除了支持多个版本的 FFmpeg 的负担，您也不必再担心安装它了。

我们提供了一个自定义构建的 FFmpeg 6.0，比您下载的版本要小得多。在 Lambda 上，它可以减少函数的冷启动时间。

我们还可以访问低级别的 C API，使我们能够做以前不可能的事情。

更快的 <OffthreadVideo>​

<OffthreadVideo> 组件是将现有视频嵌入到 Remotion 项目中的首选方式。

以前，使用 FFmpeg CLI 提取帧，现在我们使用 FFmpeg C API 提取帧。因为我们可以在提取之间保持视频打开，所以这比以前快得多。

现在可以跳过不必要的冗余解码工作，这使得在渲染过程中该组件的速度提高了两倍！

支持 WebP 和 PDF 生成​

以前您可以使用 Remotion 生成 PNG 和 JPEG - 现在我们还支持 WebP 和 PDF！

有很多方法可以渲染静态图像：新的 渲染按钮，npx remotion still 命令，renderStill() Node.JS API，在 Lambda 上渲染使用 renderStillOnLambda()，或者在 Google Cloud Run 上使用 renderStillOnCloudrun()！

更易于数据驱动的视频​

我们为 <Composition> 组件引入了一个新的 calculateMetadata() API。如果您想要：

根据 React 组件的 props 调整持续时间或分辨率
2
 在视频渲染之前执行数据获取
3
 在挂载 React 组件之前预先计算 props


为了展示新 API 的可能性，我们在文档中专门添加了一个完全专注于数据驱动视频的新部分。请参阅：参数化渲染。

升级的模板​

我们所有的 模板 都已升级为使用 Remotion 4.0。其中许多模板利用了新功能，例如流行的 文本转语音 模板允许您自定义文本和语音，模板将自动调整视频的持续时间以匹配。

我们还推出了两个新模板：文本转语音 (Google) 是 Azure TTS 模板的替代品，以及 [https://www.remotion.dev/templates/stargazer] 是一个用于庆祝 GitHub 星标里程碑的热门模板，现在可以使用 npm init video 进行初始化。

更多功能​

在 v3.3 和 v4.0 之间添加的这些功能值得强调：

@remotion/rive 包​

Rive 是 Lottie 的更快速更小的替代品。
通过新的 @remotion/rive 包，您可以在项目中包含 Rive 动画。

@remotion/shapes 包​

@remotion/shapes 是一个方便的包，用于在您的组件中包含几何形状，如 <Triangle>、<Star> 或 <Pie>！

这些组件易于动画化，纯净，无依赖，并且与 @remotion/paths 配合良好。

每个形状都可以作为一个 React 组件 <Star>，或作为一个返回 SVG 路径的纯函数 makeStar()。

@remotion/tailwind 包​

新的 Tailwind 包使您可以更轻松地在任何 Remotion 项目中安装 Tailwind。

细调音频编解码器​

现在，音频编解码器不再与视频编解码器绑定，您现在可以独立选择音频编解码器。

Lambda 改进​

播放器改进​

ES 模块支持​

现在，所有可以在浏览器中导入的 API 都有一个 ES 模块版本。

字体选择器​

在您的应用中，您现在可以显示一个 字体选择器，并且只在需要时动态加载字体。

新核心 API​

remotion 包已经有了以下改进：

加入 Cloud Run Alpha​

作为 Lambda 的对应物，我们正在开发一个 Google Cloud Run 包。
alpha 版本现已可用，通过成为早期采用者来帮助我们测试。

完整变更日志​

查看 GitHub 发布以查看 完整变更日志。

重大变更​

查看 迁移指南 以获取完整的重大变更列表。