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

Question

我有一个运行多个 youtube 视频的 jCarousel (jquery)。轮播效果很好，当您将鼠标悬停在幻灯片上时甚至会暂停 - 但如果您将光标移出幻灯片，即使正在播放视频，它也会恢复。

使用 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>

有什么建议吗？

Answer 1

当玩家触发事件时，只需调用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

然后在之前的代码中使用它（正如我编辑的那样）。