Pause and play video when in viewport

Question

I was experimenting with play and pause when a video is within the viewport... when I was searching around I found the following code.. which unfortunately didn't work:

jQuery

    $(window).scroll(function(){
        if ($(window).scroll(100)){
            $('#video').play;
        }
    });

HTML

    <video preload="auto" loop="loop" id="background">
        <source src="background/background1.mp4" type="video/mp4"> </source>
        <source src="background/background1.webm" type="video/webm"> </source>
    </video>

I've also tried the code on the following page: http://serversideguy.com/2014/02/05/play-youtube-videos-on-scroll-over/

but I couldn't get it to work either, is there anyone who could point me in the right direction?

Is it even practical to play and pause video's when in / out of the viewport, wouldn't users be startled by sounds suddenly appearing?

score 4 · Accepted Answer · answered Nov 11 '14 at 13:41

I agree with what you said in your question: users might not like it, especially if they're on mobile and you're sucking all their data plan. Anyway, here's how to check if an element is in the viewport: http://jsfiddle.net/pwhjk232/

$(document).ready(function() {
    var inner = $(".inner");
    var elementPosTop = inner.position().top;
    var viewportHeight = $(window).height();
    $(window).on('scroll', function() {
        var scrollPos = $(window).scrollTop();
        var elementFromTop = elementPosTop - scrollPos;

        if (elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight) {
            inner.addClass("active");
        } else {
            inner.removeClass("active");
        }
    });
})

Instead of using addClass you could use .get(0).play() and .get(0).pause() as suggested by Vohuman

I've worked around with the code a little bit more and I've tried to adjust your current code to fit with multiple video's but unfortunately it only pauses a video it the viewport is above the video it's trying to pause, so if you have one video on the top of your page.. and then another video under that, the first won't ever pause when viewing the second video because the viewport is under the first video, is there any way to solv this issue @Jonas — Gerwin, Nov 14 '14 at 12:23

score 2 · Answer 2 · answered Jan 13 '20 at 17:31

$(window).scroll(function(e)
  {
    var offsetRange = $(window).height() / 3,
        offsetTop = $(window).scrollTop() + offsetRange + $("#header").outerHeight(true),
        offsetBottom = offsetTop + offsetRange;

    $(".video").each(function () { 
      var y1 = $(this).offset().top;
      var y2 = offsetTop;
      if (y1 + $(this).outerHeight(true) < y2 || y1 > offsetBottom) {
        this.pause(); 
      } else {
        this.play();
      }
    });
});

score 1 · Answer 3 · edited May 23 '17 at 12:15

There are several errors in your code:

$(window).scroll(100) is not comparison. You are passing an integer to the scroll method which is used for attaching scroll listener. You should use scrollTop() method and use === or == for comparison.
play is a method, you should use () invocation operator for calling the method. But jQuery object doesn't have play method, HTMLVideoElement object has play method so you should at first get the DOM element object from the jQuery collection.

There is no element with ID of video in your code, the selector should be #background.

$(window).scroll(function(){
    if ($(window).scrollTop() === 100) {
        $('#background').get(0).play();
    } else {
        $('#background').get(0).pause();
    }
});

Note that scroll event is fired many times, you should consider throttling the handler.

Pause and play video when in viewport

3 Answers3

Linked