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();
});
Share
Improve this question
edited Jan 3, 2012 at 14:04
Reporter
3,9485 gold badges35 silver badges49 bronze badges
asked Jan 3, 2012 at 14:03
WordpressorWordpressor
7,55326 gold badges74 silver badges115 bronze badges
2
- 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
Reset to default 3You 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.