Question

我有一个运行几个YouTube视频的jCarousel（jquery）。旋转木马效果很好，甚至在您悬停在幻灯片上时会暂停 - 但如果您将光标从幻灯片上移开，即使视频正在播放，它也会恢复。

使用YouTube播放器API嵌入视频。

这是我正在使用的Carousel代码：

<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

然后在代码之前使用它（因为我已经编辑过）。

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

1 个答案: