1

我正在尝试复制此功能，从而可以通过鼠标滚动来控制视频的进度。不同寻常的是，该功能在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>
4

1 回答 1

0

我发现了一个较旧的问题，其中包含 lalengua 的关键评论，我将在此处引用：

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

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

于 2020-02-11T16:21:30.600 回答