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

Using the isInViewport plugin and jQuery, here's my code for the task

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})