HTML5 and Javascript to play videos only when visible

Question

I am interested in setting up an HTML page with multiple video clips such that each video clip plays only while visible and then pauses when out of view.

I have fo

Answer 1

None of the above seemed to work for me, but I finally found a way: you'll need the visible plugin, and this little piece of code right here:

$(window).scroll(function() {
    $('video').each(function() {
        if ($(this).visible(true)) {
            $(this)[0].play();
        } else {
            $(this)[0].pause();
        }
    })
});

This will allow any video to play only when it gets into viewport. By replacing visible( true ) by visible() , you can set it to play only when the entire video DOM element is in viewport.