滚动时，HTML5和JavaScript会暂停所有视频 [英] HTML5 and JavaScript pauses all videos when scrolled

问题描述

我跟着 HTML5和Javascript只在可见的情况下播放视频 - 它在第一个视频上效果很好，但是我的网站上的第二个视频也暂停了，当第一个视频播出时播放第一个视频时播放（滚动时）一直到顶部）。第二个视频只能播放，当它滚动到并以0.1的一小部分可见时（就像在第一个视频上一样）。

I followed HTML5 and Javascript to play videos only when visible - and it works great on the first video, but the second video further down on my site is also paused, when the first one is and plays when the first one does (when scrolled all the way to the top). The second video should only play, when it is scrolled to and visible by a fraction of 0.1 (as it does on the first video.)

我的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>

这是我的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);

所以看来，所有视频（因为getElementByTagName）只在播放时滚动到最佳。我希望在视频的0.1分之一可见时播放视频。

So it seems, that all videos (because of the getElementByTagName) are only playing, when scrolled to the top. I would like the video to play when a fraction of 0.1 of said video is visible.

希望这是有道理的。谢谢：）

Hope this makes sense. Thanks :)

推荐答案

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

I changed the fraction to 0.8 and it works just fine for me. Hope this helps

http://jsfiddle.net/jAsDJ/

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);

这篇关于滚动时，HTML5和JavaScript会暂停所有视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！