jQuery 循环 - YouTube视频在播放时不会暂停幻灯片

Question

我为此绞尽脑汁，因为我无休止地尝试制作一个包含图像和YouTube视频的jQuery循环幻灯片，并且能够在播放YouTube视频时暂停循环幻灯片。

我找到了这个例子：如何将 jQuery 事件处理程序附加到 YouTube 电影？

这似乎有效，就像我将其集成到我自己的代码中时一样：http://jsfiddle.net/waffl/qqWT8/18/

现在我不确定发生了什么，但这两个例子现在似乎都不起作用！

如果有人有任何想法，这似乎与未附加的事件处理程序有关，但我不明白为什么以前似乎有效的东西突然不行了。

Answer 1

我一直遇到同样的问题，我对你的小提琴做了一些更改，我能够让它工作。下面是 JavaScript：

var slideshowContainer = $('#slideshow');
window.handlePlayerStateChange = function(state) {
    switch (state) {
    case 1:
        // Video has begun playing/buffering
        slideshowContainer.cycle('pause');
        break;
    case 3:
        // Video has begun playing/buffering
        slideshowContainer.cycle('pause');
        break;
    case 2:
        // Video has been paused/ended
        slideshowContainer.cycle('resume');
        break;
    case 0:
        // Video has been paused/ended
        slideshowContainer.cycle('resume');
        break;
    }
}
window.onYouTubePlayerReady = function(id) {
    var player = $('#' + id)[0];
    player.addEventListener('onStateChange', 'handlePlayerStateChange');
}
var videos = ['uCr--23_AW0', 'd8h5ZuPQWZw', 'ur1_aVRLLfA', 'rDcQtg6Bgvo', 'fgJ6DA50thw', 'MD3UldIQaUo', 'IwVpZGgWdWk', 'TvCUvVkGyqQ', 'FGzRvYU0e3Q'];
var params = {
    allowfullscreen: 'true',
    allowscriptaccess: 'always',
    wmode: 'opaque'
};
for (var i = 0; i < videos.length; i++) {
    var id = 'video-' + i;
    var atts = {
        id: id,
        name: id
    };
    slideshowContainer.append($('<div/>')
        .addClass('video-wrapper')
        .append($('<div/>')
                .attr('id', id)
               )
    );
    swfobject.embedSWF('http://www.youtube.com/v/' + videos[i] + '?enablejsapi=1&playerapiid=' + id + '&version=3', id, '540', '375', '9.0.0', null, null, params, atts);
}
slideshowContainer.cycle({
    fx: 'fade',
    timeout: 8000,
    next: '#next',
    prev: '#prev'
});​

还有一个工作示例：http://jsfiddle.net/jackbrown/qqWT8/45/