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