Skip to main content

闪烁

Also available as a 6min video
在 Remotion 中避免这个常见错误

如果您的视频在渲染过程中出现闪烁或卡顿，这表明：

存在多线程问题或
2
 渲染器不会等待数据或资源加载完成 .

多线程问题​

Remotion 的渲染过程如下：

我们打开多个标签以加快视频渲染的速度。
标签不共享状态，独立运行的动画与 useCurrentFrame() 不会兼容。

解决方案​

编写视频代码时，让动画仅基于 useCurrentFrame() 的值运行。
将您的组件视为一个将帧数转换为图像的函数。

您的组件是否符合以下标准？

调用多次时，组件应始终显示相同的视觉。


组件不应依赖于按顺序渲染的帧。


视频暂停时，组件不应执行动画。


组件不应依赖于随机性 - 例外：random()

绕过多线程​

如果您的动画不会因为按顺序渲染帧而中断，用户通常会使用 --concurrency=1 标志。这将在许多情况下修复闪烁/卡顿问题，如果重构的工作量太大，则这是一种可行的方法。

这种技术的缺点是速度较慢，而且动画的正确时机仍无法保证。它还会通过 Remotion Lambda 阻止渲染。

资源加载问题​

Remotion 需要知道某个资源尚未加载，以便阻止渲染。
否则，它将截取加载状态的屏幕截图。

解决方案​

使用 <Img>、<Video>、<OffthreadVideo>、<Audio>、<Iframe> 和 <Gif>，因为它们会等待资源加载完成。

在加载数据时，使用 delayRender() 函数。
3
 确保正确等待 字体加载。
4
 只有在字体加载完成后才调用 fitText()、fillTextBox() 和 measureText()。
5
 避免使用 background-image 和 mask-image CSS 属性。

闪烁的 <Video> 标签​

添加多个 <Video> 标签可能会导致卡顿。
如果遇到此问题，请考虑使用 <OffthreadVideo> 组件进行帧完美渲染。

集成​

查看 第三方集成 列表，看看是否有解决方案可以将您的动画与 useCurrentFrame() 同步。

Remotion 为何采用这种方式​

  • 渲染速度很重要，特别是在服务器端渲染时。
    逐帧渲染会对速度产生不利影响，这种牺牲在可能编写并发安全视频时并不值得。

  • 对本来会卡顿的视频设置 --concurrency=1 并不能完全解决问题。
    往往结果看起来还行只是因为巧合，因为渲染速度大致与动画速度相同。没有真正的时间同步，结果会因机器而异。

  • 确定性视频使得像 Remotion Lambda 这样的分布式视频渲染成为可能，它可以比实时更快地渲染视频。

参见​