HTML5和JavaScript在滚动时暂停所有视频

我接着看了——第一个视频效果很好，但在我的网站上，向下的第二个视频也会暂停，当第一个视频停止时，播放第一个视频（当一直滚动到顶部时）。第二个视频应仅在滚动到0.1并以0.1的分数可见时播放（与第一个视频相同）

我的HTML：

<video id="video1" preload="auto" autoplay="autoplay" loop="loop" style="position: absolute; bottom: 0px; right: 0px; z-index: -100; width: 1440px; height: 810px; left: 0px; top: -2px;">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  <source src="video.webm" type="video/webm">
  bgvideo
</video>

...

<video id="video2" preload="auto" autoplay="autoplay" loop="loop" style="position: absolute; bottom: 0px; right: 0px; z-index: -100; width: 1440px; height: 810px; left: 0px; top: -2px;">
  <source src="video2.mp4" type="video/mp4">
  <source src="video2.ogg" type="video/ogg">
  <source src="video2.webm" type="video/webm">
  bgvideo
</video>

bgvideo
...
bgvideo

这是我的JS：

var videos = document.getElementsByTagName("video"), fraction = 0.1;

    function checkScroll() {

        for(var i = 0; i < videos.length; i++) {

            var video = videos[i];

            var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
                b = y + h, //bottom
                visibleX, visibleY, visible;

                visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
                visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

                visible = visibleX * visibleY / (w * h);

                if (visible > fraction) {
                    video.play();
                } else {
                    video.pause();
                }

        }

    }

    window.addEventListener('scroll', checkScroll, true);
    window.addEventListener('resize', checkScroll, false);

var videos=document.getElementsByTagName（“视频”），分数=0.1；
函数checkScroll（）{
对于（var i=0；i分数）{
video.play（）；
}否则{
video.pause（）；
}
}
}
window.addEventListener（'scroll'，checkScroll，true）；
window.addEventListener（'resize'，checkScroll，false）；

因此，似乎所有视频（由于getElementByTagName）只有在滚动到顶部时才会播放。我想视频播放时，一小部分的0.1说，视频是可见的

---

希望这是有意义的。谢谢：）

我将分数改为0.8，对我来说效果很好。希望这有帮助

var videos=document.getElementsByTagName（“视频”），
分数=0.8；
函数checkScroll（）{
对于（var i=0；i分数）{
video.play（）；
}否则{
video.pause（）；
}
}
}
window.addEventListener（'scroll'，checkScroll，false）；
window.addEventListener（'resize'，checkScroll，false）；

谢谢你的提示，RXMESH，但我尝试更改分数，也尝试粘贴你的代码，但似乎出现了同样的行为。有没有可能是一些css定位或者什么干扰了呢？嗯…也许我不知道你能分享一个网站链接吗？也许我能帮你查一下。

var videos = document.getElementsByTagName("video"),
fraction = 0.8;
function checkScroll() {

    for(var i = 0; i < videos.length; i++) {

        var video = videos[i];

        var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
            b = y + h, //bottom
            visibleX, visibleY, visible;

            visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
            visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

            visible = visibleX * visibleY / (w * h);

            if (visible > fraction) {
                video.play();
            } else {
                video.pause();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);