为什么 Safari 允许基于滚动的视频按预期工作，而其他浏览器则不允许？答案

【问题标题】：Why does Safari allow a scroll-based video to work as expected, while other browsers don't?为什么 Safari 允许基于滚动的视频按预期工作，而其他浏览器则不允许？
【发布时间】：2020-02-05 16:17:25
【问题描述】：

我正在尝试复制this 功能，从而可以通过鼠标滚动来控制视频的进程。不同寻常的是，该功能在 Safari 上完美运行，但在 Firefox、Opera 和 Brave 上却无法运行 - 在 Chrome 上，视频更新似乎被阻止，直到整个滚动事件完成，但确实如此控制视频的位置。因此，它给人的印象是非常锯齿或滞后（因此可以在 Chrome 上滚动视频而完全不移动）。我觉得我缺少与requestAnimationFrame 或Intersection Observer 相关的明显内容。请好心人看看，如果是这样，请告诉我，如果是这样，在哪里？

<div id="set-height">
  <video width="100%" height="auto" id="v0">
    <source src="Video.webm" type="video/webm"></source>
    <source src="Video.mp4" type="video/mp4"></source>
  </video>
</div>

<script>

  const playbackConst = 150, // lower the number, quicker the animation
        waveVid = document.querySelector('.index-section--scroll-video'),
        vid = document.getElementById('v0');

  let frameNumber = 0,
      myRequest = window.requestAnimationFrame(scrollPlay); 

  function scrollPlay() {
    frameNumber = ((window.innerHeight * 0.7) - vid.getBoundingClientRect().top) / playbackConst; // position of where the animation starts: 100vh - distance to video
    vid.currentTime = frameNumber;
    window.requestAnimationFrame(scrollPlay); // recursive call is necessary for functionality
  }

  const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      window.cancelAnimationFrame(myRequest); // this was needed as Firefox was eating my CPU up on the site
      return;
    } else {
      window.requestAnimationFrame(scrollPlay);
      console.log(vid.getBoundingClientRect().top);
    }
  });

  observer.observe(vid);
});

</script>

【问题讨论】：

虽然我发现很多关于这个功能的帖子，通常引用苹果的产品页面作为灵感，但似乎没有一个遇到这个特殊问题。我确实看到了一个 [stackoverflow.com/questions/41982520/html5-video-scroll-video]，但我已经在 Chrome 上测试了 .mp4 版本，它的运行没有任何不同 - 而 Safari 运行流畅。所以我很确定这与视频的质量无关（假设 .mp4 视频的质量比 .webm 更好）

标签： javascript video scroll controls

【解决方案1】：

我找到了一个较旧的question，其中包含 lalengua 的关键评论，我将在这里引用：

值得一提的是，视频必须每半帧或四分之一帧使用关键帧进行编码，此效果才能在 Firefox 和 Chrome 中运行。并且每个浏览器的时间间隔也应该调整，因为它们的响应不同。为此，我使用 WEBM (VP8) 视频容器取得了很好的效果。您可以将 -g 标志与 FFMPEG 一起使用来实现此目的：ffmpeg -i input.mov -g 10 output.webm

所以基本上，我的脚几乎在嘴里，我需要做的就是使用-g 标志重新编码视频，越接近 1 动画越流畅。请注意，在两种浏览器上使用相同编码的 Firefox 仍然比 Chrome 稍慢，而 Safari 仍然是 .mp4 视频最流畅的。

【讨论】：