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 /

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

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/5wZLL/12/

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

• javascript
• jquery
• html
• video
• html5-video

Share Improve this question Follow edited Mar 13, 2015 at 16:36 Blazemonger 93.1k2727 gold badges145145 silver badges181181 bronze badges asked Jun 16, 2014 at 17:53 new_frontenddevnew_frontenddev 17333 gold badges77 silver badges2121 bronze badges 1

• I tried the solution given here too, stackoverflow./questions/15395920/… which is more or less the same. The same thing happens. Has got anything to do with Stellar or the position of the video. Please help I am really frustrated at how to fix this – new_frontenddev Commented Jun 16, 2014 at 18:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 pletely 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 pared 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./qekat/1/edit