I have a couple of HTML5 videos on my website (within a slider), they automatically cycle every x seconds (or when user clicks "next slide").

I want to stop the videos that are actually invisible to user, any ideas how to achieve that?

I was tryng to do something like that, but I guess there's "each" missing and it works after click instead all the time (ok, in fact it doesn't work because "this" is used wrong here I guess, but you get the point, sorry, I'm not a JS-guy at all :():

document.on('click', ".videojs:hidden", function(){
   alert('video hidden!');    
   jQuery(this).player.pause();
});

I have a couple of HTML5 videos on my website (within a slider), they automatically cycle every x seconds (or when user clicks "next slide").

I want to stop the videos that are actually invisible to user, any ideas how to achieve that?

I was tryng to do something like that, but I guess there's "each" missing and it works after click instead all the time (ok, in fact it doesn't work because "this" is used wrong here I guess, but you get the point, sorry, I'm not a JS-guy at all :():

document.on('click', ".videojs:hidden", function(){
   alert('video hidden!');    
   jQuery(this).player.pause();
});

• javascript
• jquery
• html
• hidden
• visible

• do you have only one video or more? – Dion Commented Jan 3, 2012 at 14:09
• @DRP96, I have unlimited number of them, from 5 to "a lot" :) – Wordpressor Commented Jan 3, 2012 at 14:10

2 Answers 2

You might want to look into this:

http://www.west-wind./weblog/posts/2008/Sep/12/jQuery-CSS-Property-Monitoring-Plugin-updated

You can then do something like this:

jQuery(".videojs").watch("display,visibility", function() { 
  if(!jQuery(".videojs").is(':visible'))
  {
    alert('video hidden!');    
    jQuery(".videojs").player.pause();
  }
});

I think you want to look into using setInterval(). Something like:

var videoInterval = setInterval(function() {
  // video check logic here
}, 1000);

The above code will run your video check every second (1000 milliseconds). You can probably also use $( instead of jQuery(. The videoInterval variable will let you use clearInterval() if you need to stop the "loop" of checks for any reason. I believe this code will need to be inside of your $(document).ready(function() {...}) block.