HTML5 and JavaScript pauses all videos when scrolled

Question

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

My 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>

Here is my 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);

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

score 1 · Answer 1 · answered Apr 03 '14 at 08:14

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

Thanks for the tip, RXMESH, but I tried chaning the fraction, and I also tried pasting your code, but the same behaviour seems to be present. Is it possible that some css positioning or something is interfering? — Flannon, Apr 03 '14 at 11:24
Hmm...Maybe I don't know could you share a link to the site maybe I can check it out for you. — RXMESH, Apr 03 '14 at 14:22

HTML5 and JavaScript pauses all videos when scrolled

1 Answers1