最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery how to constantly check if element is hiddenvisible? - Stack Overflow

programmeradmin5浏览0评论

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
Add a ment  | 

2 Answers 2

Reset to default 3

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.

发布评论

评论列表(0)

  1. 暂无评论