Question

我尝试通过滚动来控制视频，以便当用户向下移动页面时，视频会随着滚动而移动。我这样做是通过向scroll事件添加一个事件处理程序来更新视频元素的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/QaZJvo

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帧设置一个关键帧。

重复设置HTML5视频的当前时间在Chrome / Firefox上是紧张不安的，但不是Safari

1 个答案: