如何让jCarousel在YouTube视频播放时暂停？

我有一个jCarousel（jQuery）运行几个YouTube视频。转盘效果很好，甚至在您将鼠标悬停在幻灯片上时也会暂停 - 但即使您正在播放视频，如果将光标从幻灯片中移出，它也会恢复。如何让jCarousel在YouTube视频播放时暂停？

使用YouTube Player API嵌入视频。

插件：http://sorgalla.com/jcarousel/

这是我使用的旋转木马代码：

<script type="text/javascript"> 
function mycarousel_initCallback(carousel, item, idx, state){ 
    // Disable autoscrolling if the user clicks the prev or next button. 
    carousel.buttonNext.bind('click', function() { 
     carousel.startAuto(0); 
    }); 

    carousel.buttonPrev.bind('click', function() { 
     carousel.startAuto(0); 
    }); 

    // Pause autoscrolling if the user moves with the cursor over the clip. 
    $('#mycarousel').hover(function() { 
     carousel.stopAuto(); 
    }, function() { 
     carousel.startAuto(); 
    }); 

}; 

$(function() { 
    $('#mycarousel').jcarousel({ 
     auto: 2, 
     wrap: 'both', 
     initCallback: mycarousel_initCallback 
    }); 
}); 
</script>

YouTube的脚本：

<script> 
    var tag = document.createElement('script'); 
    tag.src = "http://www.youtube.com/player_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
    var done = false; 
    var player; 

function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '505', // 535 
     width: '900', 
     videoId: 'DxZve0UV6UM', 
     playerVars: { 
     'autoplay': 0, 
     'controls': 0, 
     'modestbranding': 1, 
     'wmode': 'opaque' 
     }, 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
} 
function onPlayerReady(evt) { 
    player.setPlaybackQuality('hd720'); 
} 
function onPlayerStateChange(evt) { 

    if (evt.data == YT.PlayerState.PLAYING && !done) { 

     done = true; 
    } 
} 
function stopVideo() { 
    player.stopVideo(); 
} 
</script>

和HTML ...

   <ul id="mycarousel" class="jcarousel-skin-tango"> 
        <li> 
         <div id="player"></div> 
        </li> 
        <li> 
         <div id="player"></div> 
        </li> 
       </ul>

任何sugg estions？

来源

2012-03-13 Stacks on Stacks on Stacks

直接让carousel.startAuto()和carousel.stopAuto()当玩家触发一个事件：

function onPlayerStateChange(evt) { 
    if(evt.data == YT.PlayerState.PLAYING) { 
     global_carousel.stopAuto(); // Stop the carousel, if video is playing 
    } else { 
     global_carousel.startAuto(); // Otherwise, start it 
    } 
}

编辑：
使变量carousel全球内mycarousel_initCallback：

var global_carousel; 
function mycarousel_initCallback(carousel, item, idx, state) { 
    global_carousel = carousel; 
    //Other code

然后在使用替代代码之前（如我编辑）。

来源

2012-03-14 05:56:04

不幸的是，这没有效果。 – 2012-03-16 00:13:34

@CoreyCapetillo你能告诉你有什么错误吗？我编辑了我的答案了一下。 – 2012-03-16 11:08:49

如何让jCarousel在YouTube视频播放时暂停？

回答

相关问题