CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Flannon
Flannon

Reputation: 1

HTML5 and JavaScript pauses all videos when scrolled

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

Upvotes: 0

Views: 3374

Answers (1)

RXMESH
RXMESH

Reputation: 286

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

Upvotes: 1

Related Questions