How to pause html5 video when out of view code (non-statically positioned)

Question

I am using a html5 video on my website. I want it to play only when in view and pause otherwise.

I am also using javascript to have a play/pause button on it.

I was able to use both the features on one site easily and the video was the first element on the site. However this time it is the second div

I feel like there is a conflict because of the same element being targetted or something going wrong that I just can't seem to understand

In this case the video autoplays when I open the site, and when I scroll to the actual video, it stops(pauses)! Can anyone see what I am doing wrong ?

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

  </script>      

I have attached a fiddle http://jsfiddle.net/5wZLL/12/

other plugins that I have used on this site : Stellar.Js FlexSlider SmoothScroll

Answer 1

The code you've posted here is mostly fine and should work more or less correctly, but here are a few things to look out for:

1. Remove the autoplay attribute completely from your video element. Setting it to "0" does not turn it off. Any value at all for autoplay will make it true.

2. You'll probably want to call checkScroll one time at page load to cover the initial window state, in case the video is in view initially. Otherwise, it won't start until you scroll at least one time.

3. The math here assumes that your video is positioned statically, with no parent elements that have CSS position as fixed, relative, or absolute. If you need to do that, you may need to modify the position calculation slightly. But this is not a problem in the jsfiddle you posted.

4. Based on the value of fraction, the video will only play if 80% of it is visible. If the browser window is smaller than 80% of the area of the video element, it will never play no matter where you scroll. You may want to adjust the value compared to visible to account for that, or you can leave it as is. Up to you.

5. Make sure the video is actually being loaded. If the file is not found or if the network is too slow, the play state may be set but you may not see it playing. You might want to have some other visual indicator of the play state, using the play and pause events and the paused property.

6. Finally, if you're going to have a separate pause/play button, you'll want to use that to set some external variable that disables the scrolling logic so they don't conflict.

Based on your description, I suspect that you want to pay close attention to 1. and 3., as they will likely solve your problem.

Update: It looks like your problem is 3. When you have parent elements that are not positioned statically, offsetTop and offsetLeft are not sufficient to get the position of your video element within the page. You need to loop through all the ancestor elements that can affect the position, like this:

parent = video;
while (parent && parent !== document.body) {
    x += parent.offsetLeft;
    y += parent.offsetTop;
    parent = parent.offsetParent;
}

Here's a working example: http://jsbin.com/qekat/1/edit