为什么 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 视频中最流畅的。

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

Why does Safari allow a scroll-based video to work as expected, while other browsers don't?

javascript

video

controls

scroll