使用scrollMagic控制HTML5视频，为什么要设置动画/掉帧？

hey SO members,

我想与滚动一起来回播放HTML5视频。动画逐帧控制视频的滚动量。

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

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

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

我更新了我的jsfiddle。