Как заставить jCarousel приостановить воспроизведение видео на YouTube? - PullRequest
Новая
       41

Как заставить jCarousel приостановить воспроизведение видео на YouTube?

1 голос
/ 14 марта 2012

У меня работает jCarousel (jquery) для нескольких видео на YouTube.Карусель прекрасно работает и даже делает паузу, когда вы наводите курсор на слайде, но она возобновится, если вы уберете курсор со слайда, даже если видео воспроизводится.

Видео внедряются с помощью API-интерфейса проигрывателя YouTube.

Плагин: 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>

Есть предложения?

1 Ответ

0 голосов
/ 14 марта 2012

Просто позвоните 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
    }
}

Edit:
Сделайте переменную carousel global внутри mycarousel_initCallback: 

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

Затем используйте это вместо этого в коде ранее (как я редактировал).

...