Question

我在幻灯片中有一个嵌入式YouTube视频（使用Cycle插件的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);
    }
});

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

1 个答案: