在 Firefox 上的 Scroll 上播放视频不起作用

编程问答 2022-04-30

问题描述

我只想在滚动时播放视频。它适用于 Safari、Chrome、Opera，但不适用于 Firefox。我已经将源更改为 OGV 并且比它的工作原理稍微好一点。它播放第一帧，然后计算机非常努力地工作，并且网站有很多错误，它不再播放。 可能是因为我之间有多个视频。

有没有人看到问题或知道更好的解决方案，这可能也适用于移动设备。我在编程网站方面相对较新，因此我采用了第一个有效的解决方案。

https://michawempe.github.io/stackOverflow/myWork.html

我尝试获取代码的所有必要部分：（来自“// Playing Video on Scroll”它应该变得更加重要）

<video id="v0" tabindex="0",autobuffer preload="auto"></video>
<video id="v1" tabindex="0",autobuffer preload="auto"></video>
<video id="v2" tabindex="0",autobuffer preload="auto"></video>
<video id="v3" tabindex="0",autobuffer preload="auto"></video>
<video id="v4" tabindex="0",autobuffer preload="auto"></video>

<script>
// Load Video
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;

var video0 = document.getElementById("v0");
var video1 = document.getElementById("v1");
var video2 = document.getElementById("v2");
var video3 = document.getElementById("v3");
var video4 = document.getElementById("v4");

if (is_firefox) {
  video0.src = "video0.ogv";
  video1.src = "video1.ogv";
  video2.src = "video2.ogv";
  video3.src = "video3.ogv";
  video4.src = "video4.ogv";
}

else {
  video0.src = "video0.mp4";
  video1.src = "video1.mp4";
  video2.src = "video2.mp4";
  video3.src = "video3.mp4";
  video4.src = "video4.mp4";
}


// Playing Video on Scroll

var frameNumber = 0;
var playbackConst = [850,970,1700,1500,1470];

value = 0;

window.onscroll = function() {
  if ((window.pageYOffset) <= 4000) {
    value = 0;
  } else if ((window.pageYOffset) <= 8000) {
    value = 1;
  } else if ((window.pageYOffset) <= 12000) {
    value = 2;
  } else if ((window.pageYOffset) <= 16000) {
    value = 3;
  } else {
    value = 4;
  }

  video = document.getElementById('v' + value);

  function scrollPlay(){
    var frameNumber  = (window.pageYOffset - (value * 4000))/playbackConst[value];
    video.currentTime  = frameNumber;
    window.requestAnimationFrame(scrollPlay);
  }
  window.requestAnimationFrame(scrollPlay);
};

</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

firefoxfirefoxjavascriptvideovideo