Cycle2：播放 YouTube 视频时自动暂停幻灯片（超时）

【问题标题】：Cycle2: automatically pause slideshow (timeout) when YouTube-video is playedCycle2：播放 YouTube 视频时自动暂停幻灯片（超时）
【发布时间】：2015-01-22 12:40:46
【问题描述】：

当用户点击 YouTube 播放按钮 (http://jquery.malsup.com/cycle2/demo/video.php) 时，我想暂停我的 Cycle2 幻灯片放映

重要代码部分：

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

到目前为止，我的解决方法是设置悬停时暂停 - 当然，当用户鼠标离开幻灯片时，这不起作用

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

是否有某种隐藏功能可以在视频播放时暂停幻灯片？

【问题讨论】：

标签： jquery cycle jquery-cycle jquery-cycle2

【解决方案1】：

如果您使用的是 data-cycle-youtube=true - 试试这个简单的 JS/JQuery 代码以及 Youtube API：

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;   
      }  
}

【讨论】：