javascript - 在 Chrome/Firefox 上重复设置 HTML5 视频 currentTime 是紧张的，但不是 Safari

Question

我试图通过滚动来控制视频，这样当用户向下移动页面时，视频会随着他们的滚动而移动。我通过向滚动事件添加一个事件处理程序来实现这一点，它会更新视频元素的 currentTime 属性。使用 Safari (11.0.2) 时，动画很流畅，但在 Chrome (63) 或 Firefox 上，框架仅在惯性滚动结束时更新。我可以通过将视频的水平分辨率降低到 600 像素来平滑动画。这仅仅是性能不同的产物，还是我的代码存在一些特定于浏览器的优化问题？

注意:我使用具有多点触控平滑滚动功能的 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帧设置一个关键帧。