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:

Answer 1

There are several errors in your code:

1. $(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.

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

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