Skip to main content

Remotion 2.2

· 13 min read
Jonny Burger
Jonny Burger
Remotion 创始人

欢迎来到 Remotion 2.2 的发布说明！距离 v2.1 已经有一段时间了，但在此期间我们还发布了十几个较小的版本。本文总结了过去两个月的亮点 🎉。

环境变量支持​

我们开发人员广泛使用环境变量来管理配置、密钥和其他不希望提交到 GitHub 存储库的内容。如果您用代码编写视频，环境变量也很有用！

我们增加了从 CLI 支持环境变量的功能，使用 .env 文件，并允许您通过我们的 Node.JS API 传递环境变量。点击此处了解更多信息。

<Freeze /> 组件​

这个新的核心组件将冻结其所有子元素，并使它们认为视频在某个特定时间暂停。

您可以使用它来显示视频的静止画面，例如：

MyVideo.tsx
tsx
import {Freeze, Video} from 'remotion';
import myVid from './vid.mp4';
 
export const MyVideo = () => {
  return (
    <Freeze frame={30}>
      <Video src={myVid} />
    </Freeze>
  );
};
MyVideo.tsx
tsx
import {Freeze, Video} from 'remotion';
import myVid from './vid.mp4';
 
export const MyVideo = () => {
  return (
    <Freeze frame={30}>
      <Video src={myVid} />
    </Freeze>
  );
};

但是，它适用于任何内容。正如您所看到的，API 非常简单！您可以将其与 <Sequence> API 结合使用，使任何内容播放、暂停，然后继续播放。

在此处阅读有关 <Freeze /> 组件的文档。

视频 + 音频 playbackRate​

此属性允许您减慢或加快视频和音频元素的播放速度！现在您可以以正常速度导入视频，然后以慢动作或延时播放它，而无需重新渲染视频。

LightningSpeed.tsx
tsx
import {Video} from 'remotion';
import myVid from './vid.mp4';
 
export const MyVideo = () => {
  return <Video src={myVid} playbackRate={4} />;
};
LightningSpeed.tsx
tsx
import {Video} from 'remotion';
import myVid from './vid.mp4';
 
export const MyVideo = () => {
  return <Video src={myVid} playbackRate={4} />;
};

在预览时，我们使用 HTML5 的 playbackRate API，渲染时，我们将为任何速度计算正确的 FFMPEG 命令。

了解有关 <Audio /> 的 playbackRate 属性和 <Video /> 的 playbackRate 属性的更多信息。

@remotion/three 包​

如果你错过了，我们发布了一个新的辅助包，用于 React Three Fiber！

0:00 / 0:10

毫不夸张地说，Three.JS 并不容易，但是通过 Poimandres 所做的工作，使其更易接近并与 React 更加集成，这一切正在迅速改变。在 React 中创建 3D 视频并将其渲染为真实的 MP4 视频，这是可能的！

了解更多关于 @remotion/three 的信息，并开始使用我们的 模板。

ProRes 支持和 MKV 支持​

在 React 中创建 MP4 视频，这只是我们的营销口号。我们还支持许多其他编解码器，如 H265、WebM，甚至透明的 WebM！

我们正在添加另外两种编解码器：

  • ProRes 是一种适用于使用 Final Cut Pro、Adobe Premiere 或 Davinci Resolve 的视频编辑人员的编解码器。假设您想使用 Remotion 创建一个叠加动画，并在传统的视频剪辑程序中使用它，您现在可以使用 ProRes 导出带有 alpha 通道的视频，并无损地导入到许多其他程序中。

  • Matroska 容器格式（可以通过 .mkv 扩展名识别）通常也只包含 H.264 视频，这是 MP4 所使用的相同编解码器。但是它对音频有更大的灵活性，并允许无损音频流被该格式包含。MKV 支持将对即将推出的 Remotion 功能非常有用，并且是让我们迈向月球的第一步。

阅读 编码指南 以查看所有选项的概述。

<Player /> 更新​

@remotion/player，目前仍处于实验阶段，允许在 Web 上播放 Remotion 视频而无需对其进行编码。我们已经取得了以下进展，以使其更加稳定：

音频控件​

现在播放器具有音量滑块和静音按钮，允许用户控制视频。您可以使用 showVolumeControls 属性决定是否要显示这些控件。

音频也可以通过编程方式进行控制。我们添加了getVolume()、setVolume()、mute()、unmute()和isMuted()方法，以便您实现自己的解决方案。

timeupdate 事件​

受到同名的 HTML5 事件的启发，我们向 Player 添加了一个timeupdate事件。与seeked事件不同，它不会在每一帧上触发，因此如果您只想定期更新有关时间更新的信息，可以使用此事件而无需对其进行节流。

clickToPlay 属性​

此属性允许您控制用户是否允许单击视频进行暂停或播放。如果播放器的控件已启用，默认值为 true。

doubleClickToFullscreen 属性​

此属性允许您控制用户是否允许双击视频进行全屏显示。如果启用，单击暂停视频将有一个短暂延迟，以等待可能的第二次单击。

时间轴滚动位置得到保留​

在编写视频并刷新预览时，视频会跳回到第一帧，这很烦人。现在不会了 - 如果刷新，您将回到离开的地方！

Remotion 等待字体加载​

如果通过 Google Fonts 加载 Web 字体，它将使用 font-display: swap 进行加载，这意味着 Remotion 有时会在字体加载之前呈现一帧。现在我们使用 document.fonts.ready 浏览器 API，使加载 Web 字体对您完全无缝。

指定自定义 --port​

默认情况下，Remotion 预览会在端口 3000 上启动服务器。如果出于任何原因希望它在不同端口上启动，现在可以传递一个 CLI 标志。

更多有用的错误处理​

我们希望在您遇到棘手问题时帮助您。以下是一些我们现在为您提供有用警告并链接到文档的情况的示例：

  • 在页面上导入了多个 Remotion 版本（例如在应用程序中使用 <Player /> 时）
  • 加载了不支持寻址的视频（例如从 Google Cloud 存储中提供服务时）
  • 加载了一个不支持的编解码器的视频（例如在 Chromium 浏览器中的 MP4）
  • 创建了一个 delayRender() 处理程序，但从未清除

文档升级​

搜索​

现在我们在文档右上角有一个搜索框！感谢 Algolia 提供主机和索引文档的小部件。

类型提示​

你是否在上面的代码片段中注意到了？现在你可以将鼠标悬停在任何符号上并查看其类型。它由 Typescript + Twoslash 提供支持。一个非常好的副作用是，我们现在无法在文档中犯任何拼写错误，因为所有代码片段都经过了类型检查。

故障排除指南​

我们现在有关于可能遇到的各种问题的帮助文章。目前我们已经写了关于 6 个常见问题，并将它们放在了文档的一个新部分中，名为故障排除。

第三方集成页面​

创建了一个新页面，列出了一些流行的库，并描述了它们与 Remotion 的良好配合情况 - 或者不配合情况。

新的首页​

最后，Remotion 的首页进行了改头换面！我们希望更好地传达 Remotion 是什么以及为什么它很棒。

各种 Bug 修复​

  • 修复了调用 getCompositions() 时的内存泄漏问题 #480
  • 为 Dockerfile 添加了 emoji 支持 #476
  • 预览现在在时间轴中显示序列中的当前时间 #468
  • TTF 字体现在可以本地加载 #462
  • 修复了 Remotion Player 假定自身处于渲染环境中的问题 #460
  • 修复了 getAudioMetadata() 和 getAudioDuration() 在 onError 事件中未返回错误的问题 #459
  • 添加了如何使用 TailwindCSS 的文档 69b079e
  • 修复了如何使用 SASS/SCSS 的文档 e92c917
  • 如果您使用纯 JS 入口文件，还可以使用 remotion.config.js 配置文件 #475
  • 您可以使用 Config.Preview.setMaxTimelineTracks() 自定义最多显示多少时间轴轨道 #439
  • 修复了环境变量不会立即可访问的 bug #432
  • 输入属性标志现在也可以传递给预览 #430
  • 更好地验证最常见函数的输入
  • 改进了渲染非常长的视频，使用更少的内存并避免最大调用堆栈超出错误消息。#398
  • 不再允许将 crf 设置为 0 用于 H264 视频，因为这将导致视频在所有平台上都无法播放。#379
  • <Sequence /> 的文档现在具有交互式示例。#378
  • 向核心函数添加了大量测试。#376 等等。
  • 改进了 Typescript 类型，允许传递更多类型的组件给 component。#372

感谢所有贡献者​

这些功能大部分是由社区提出并实现的，这太棒了。是时候表扬一下了！

  • 感谢 Björn Zeutzheim 实现了 @remotion/three 包！
  • 感谢 Frenco 使所有文档代码片段类型安全，并添加了悬停预览。你甚至修复了 Twoslash 中的一个 bug，这个库支持这个功能，并且非常细心地执行了这个操作！
  • 感谢 cnnr 实现了环境变量支持！
  • 感谢 Arthur Denner 发现了 document.fonts.ready 功能！
  • 感谢 Ashik Meerankutty 为 Player 实现了 timeupdate 事件！
  • 感谢 Soham Shah 添加了 GitHub Issue 模板，并致力于 Next.JS 模板！
  • 感谢 William Candillon 实现了 ProRes 支持！
  • 感谢 Salvatore 为 Video 和 Audio 组件实现了 playbackRate 支持！
  • 感谢 ahgsql 改进了时间线中 Sequences 的显示方式！
  • 感谢 Mika Andrianarijaona 实现了 --port 参数！
  • 感谢 Jonas Brunner、Tobias Boner 和 Calvin Falter 大大改进了测试覆盖率！
  • 感谢 Tamás Sallai 提交并评论了许多重要问题，并起草了可访问性功能。

以及许多其他贡献修复 bug 和改进文档。

业务更新​

我们开始看到人们使用 Remotion 推出产品和创业公司，这太棒了。敬请关注即将发布的文章，重点介绍人们如何将 Remotion 用于他们的业务案例！在撰写本文时，目前有五家客户拥有 公司许可证。

除了Shankhadeep Dey之外，我们还欢迎Mehmet Ademi加入团队，担任项目经理和业务开发人员。

我们正在越来越多地对非紧急问题进行悬赏，迄今已向Remotion贡献者支付了657美元的奖励，此外，我们还向被我们联系的顶级贡献者支付了数千美元。

我们正在多方面努力，使Remotion对于希望将程序化视频集成到其产品中的企业和Indie Hackers变得更加优秀 - 敬请关注！