问题描述
hey SO members,
我想与滚动一起来回播放HTML5视频。动画逐帧控制视频的滚动量。
我使用scrollMagic对其进行了编码(轻巧且非常简单)。嵌入式视频也是轻量级的(尝试丑陋/缩小后的视频,结果相同)。
我面临的问题是,当您轻轻滚动时,动画看起来几乎不流畅。 但是,当“快速”滚动时,就像掉了很多帧一样。 我想这可能是正常的,例如进度百分比从50%下降到75%。但事实并非如此。控制台中显示的百分比显示百分比值平滑更新,某些帧未绘制,并且显示为切碎的动画。我希望它平滑,无论用户滚动多快。有什么想法吗?
https://jsfiddle.net/yumigo/h7g081n6/72/
解决方法
我最终发现视频是关键。 MP4需要具有非常低的关键帧间隔(在我的情况下为2,而不是通常的10),以确保平滑滚动,尤其是向上滚动时。 另外,由于webm播放似乎占用更多CPU,因此请先加载mp4。 现在非常流畅。
我更新了我的jsfiddle。