使用 scrollMagic 控制 HTML5 视频，为什么会出现动画卡顿/丢帧？

Question

Hey SO members,

我想随着滚动来回播放 HTML5 视频。动画根据滚动量逐帧控制视频。

我使用 scrollMagic 进行了编码（它轻量且非常简单）。嵌入的视频也是轻量级的（尝试了丑陋/过度缩小的视频，结果相同）。

我面临的问题是，当您轻轻滚动时，动画看起来几乎不流畅。 但是当“快速”滚动时，就像丢了很多帧一样。 例如，如果进度百分比从 50% 下降到 75%，我想这可能是正常的。但事实并非如此。控制台中显示的百分比显示百分比值更新平滑，某些帧未绘制并导致动画被截断。无论用户滚动多快，我都希望它流畅。有什么想法吗？

https://jsfiddle.net/yumigo/h7g081n6/72/

Answer 1

我最终发现视频是关键。 MP4 需要有一个非常低的关键帧间隔（在我的情况下为 2，而不是通常为 10）以确保平滑滚动，尤其是在向上滚动时。 此外，首先加载 mp4，因为 webm 播放似乎更占用 CPU。 现在完美流畅。

我更新了我的 jsfiddle。