Cycle2: автоматически приостанавливать слайд-шоу (тайм-аут) при воспроизведении YouTube-видео

Я хотел бы приостановить слайд-шоу Cycle2, когда пользователь нажимает кнопку воспроизведения YouTube (http://jquery.malsup.com/cycle2/demo/video.php)

Важная часть кода:

data-cycle-timeout=5000
data-cycle-youtube=true
data-cycle-youtube-autostart=false

До сих пор мой обходной путь устанавливал паузу при наведении, но, конечно, он не работает, когда пользователь мыши покидает слайд-шоу.

data-cycle-pause-on-hover="true"

Может быть, есть какая-то скрытая функция для приостановки слайд-шоу при воспроизведении видео?


person Arerrac    schedule 22.01.2015    source источник


Ответы (1)


Если вы используете data-cycle-youtube=true, попробуйте этот простой код JS/JQuery вместе с API Youtube:

1) найти всех игроков и прикрепить к ним EventListeners

2) обрабатывать изменение состояния игрока и делать все, что вы хотите. Здесь пауза/возобновление слайд-шоу

function onYouTubePlayerReady(){     
      var players = $('.cycle-youtube embed').each(function(){   
        if(this.addEventListener) {  
          this.addEventListener('onStateChange', 'handlePlayerStateChange');     
        }else{ 
          this.attachEvent('onStateChange', 'handlePlayerStateChange');  
        }    
      });    
}
function handlePlayerStateChange(state) {    
      switch(state) {    
        case 1: case 3:  // Video has begun playing/buffering    
            $('.cycle-slideshow').cycle('pause'); 
        break;   
        case 2: case 0: // Video has been paused/ended   
            $('.cycle-slideshow').cycle('resume');   
        break;   
      }  
}
person Luke    schedule 23.01.2015