如何解决在 Firefox 上的 Scroll 上播放视频不起作用
我只想在滚动时播放视频。它适用于 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 举报,一经查实,本站将立刻删除。