jQuery 循环 - 播放时 youtube 视频不暂停幻灯片？答案

【问题标题】：jQuery cycle - youtube videos not pausing the slideshow when played?jQuery 循环 - 播放时 youtube 视频不暂停幻灯片？
【发布时间】：2011-05-08 20:18:33
【问题描述】：

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

我找到了这个例子： How do I attach a jQuery event handler to a YouTube movie?

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

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

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

【问题讨论】：

我认为您缺少 api 初始化字符串：“enablejsapi=1” - 例如“youtube.com/e/VIDEO_ID?enablejsapi=1&version=3”见code.google.com/apis/youtube/js_api_reference.html
@fudgey 我相信它是在flashvar enablejsapi: 1 中启用的，不是吗？我也尝试将初始化字符串添加到 swfobject 嵌入调用，但它似乎不起作用：swfobject.embedSWF('http://www.youtube.com/v/' + videos[i]+'&enablejsapi=1', id, '540', '375', '9.0.0', false, flashvars, params);

标签： jquery youtube cycle event-handling

【解决方案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/

【讨论】：