Question

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

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

这似乎与我将其集成到我自己的代码中时一样有效：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/

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

1 个答案: