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

Question

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

Видеоролики встроены в API-интерфейс YouTube Player.

Плагин: http://sorgalla.com/jcarousel/

Это код 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> 

Любое предложение estions?

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 
    } 
} 

Edit:
Сделать переменную carousel глобальной внутри mycarousel_initCallback:

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

Затем использовать, что вместо того, чтобы в код до (как я отредактировал).