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

Question

我正在尝试复制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>

Answer 1

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

It's important to mention that the video has to be encoded with Keyframes every half or quarter FPS for this effect to work in Firefox and Chrome. And the interval also should be tweaked for each browser as they respond differently. I've had good results using WEBM (VP8) video container for that matter. You could use -g flag with FFMPEG to achieve this: ffmpeg -i input.mov -g 10 output.webm

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