jquery - 使用循环插件在下一张幻灯片上暂停 youtube 视频

Question

我在幻灯片中嵌入了一个 YouTube 视频（使用 Cycle Plugin 的 MaxImage），一旦用户单击下一张幻灯片，我就会尝试暂停该视频。HTML5 视频有一个内置功能，但我只是不确定如何为 YouTube 做同样的事情。谢谢！

注意之前和之后的功能..

$(function(){
$('#maximage').maximage({
    cycleOptions: {
        fx: 'fade',
        speed: 600,
        timeout: 0,
        prev: '.prev',
        next: '.next',
        pause: 1,
        before: function(last,current){
            if(!$.browser.msie){
                // Start HTML5 video when you arrive
                if($(current).find('video').length > 0) $(current).find('video')[0].play();
                }
            },
        after: function(last,current){
            if(!$.browser.msie){
                // Pauses HTML5 video when you leave it
                if($(last).find('video').length > 0) $(last).find('video')[0].pause();
            }
        },    

        onFirstImageLoaded: function(){
        jQuery('#loader').hide();
        jQuery('#maximage').fadeIn(200);
    }
});         
});

Answer 1

您需要使用iFrame API，否则由于跨域策略，您无法与视频交互：

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}
$('#maximage').maximage({
    cycleOptions: {
        fx: 'fade',
        speed: 600,
        timeout: 0,
        prev: '.prev',
        next: '.next',
        pause: 1,
        before: function(last,current){
            if(player != null) player.playVideo()
        },
        after: function(last,current){
            if(player != null) player.pauseVideo()
        },    

        onFirstImageLoaded: function(){
        jQuery('#loader').hide();
        jQuery('#maximage').fadeIn(200);
    }
});