jQuery, как постоянно проверять, является ли элемент скрытым / видимым?

Question

У меня есть пара HTML5-видео на моем веб-сайте (внутри слайдера), они автоматически переключаются каждые x секунд (или когда пользователь нажимает «следующий слайд»).

Я хочу остановить видео, которые фактически невидимы для пользователя, есть идеи, как этого добиться?

Я пытался сделать что-то подобное, но я думаю, что «каждый» отсутствует, и он работает вместо щелчка все время (хорошо, на самом деле, это не работает, потому что «это» используется здесь неправильно, я думаю, но вы понимаете, извините, я совсем не JS-парень: ():

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

Answer 1

Вы можете посмотреть на это:

http://www.west -wind.com / блог / сообщений / 2008 / Сентябрь / 12 / JQuery-CSS-Property-Monitoring-Plugin обновляемый

Затем вы можете сделать что-то вроде этого:

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

Answer 2

Я думаю, что вы хотите изучить использование setInterval () . Что-то вроде:

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

Приведенный выше код будет запускать проверку видео каждую секунду (1000 миллисекунд). Вы также можете использовать $( вместо jQuery(. Переменная videoInterval позволит вам использовать clearInterval(), если вам необходимо по какой-либо причине остановить «цикл» проверок. Я считаю, что этот код должен быть внутри вашего $(document).ready(function() {...}) блока.