反复设置HTML5视频的currentTime在Chrome / Firefox上不稳定，但在Safari上却不稳定

Question

我试图通过滚动来控制视频，以便当用户向下移动页面时，视频也会随着滚动而移动。为此，我向滚动事件添加了一个事件处理程序，该事件处理程序更新了视频元素的currentTime属性。当使用Safari（11.0.2）时，动画是平滑的，但是在Chrome（63）或Firefox上，该帧仅在惯性滚动结束时更新。我可以通过将视频的水平分辨率降低到600px来平滑动画。这仅仅是性能不同的产品吗，还是我的代码存在一些特定于浏览器的优化问题？

注意：我使用Mac进行了多点触控平滑滚动测试。不知道是否使用滚轮可以明显看出这种现象。

下面是使用的js和示例的链接：

var total, video;
window.onload = function() {
  video = document.getElementById("video");

  // Should react to scrolling until halfway down the video.
  total = video.scrollHeight/2 + document.getElementById('top').scrollHeight;
  window.addEventListener("scroll", animateGoat, false);
};

function animateGoat(ev) {
  var scroll = window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop || 0;
  // Updates the video to the time with the same fraction of completion as the scroll.
  video.currentTime = scroll <= total ? 2 * scroll / total : 2;
}

https://codepen.io/anon/pen/gVbNNQ

Answer 1

我认为，断断续续与视频本身的编码方式有关。

使用ffmpeg，您可以手动指定关键帧间隔，该间隔指定I帧之间的距离。

我无法提供视频为何能在Safari上而不是在Chrome / FF上流畅呈现的见解，但是创建具有较小关键帧/ GOP间隔的视频可以缓解此问题，但需要增加文件大小。

尝试使用以下方法转换视频：
ffmpeg -i input.mp4 -g 4 -vcodec libx264 -profile:v main -level:v 4.1 -an -movflags faststart output.mp4

上面的关键标志-g 4每4帧设置一个关键帧。