Использование jQuery для воспроизведения / остановки нескольких плееров YouTube - PullRequest
Новая
       1

Использование jQuery для воспроизведения / остановки нескольких плееров YouTube

3 голосов
/ 23 сентября 2011

Я пытаюсь воспроизвести / остановить несколько плееров YouTube на одной странице.Я могу запускать проигрыватели автоматически (т. Е. С помощью пользовательского метода, называемого loadYouTubeVideo(playerID)) при нажатии, но я не уверен, как снова получить доступ к объектам проигрывателя из другого вызова функции (т. Е. С помощью пользовательского метода с именем unloadYouTubeVideo(playerID)).

Вот jsfiddle с тем, о чем я говорю: http://jsfiddle.net/iwasrobbed/9Dj8c/3/

Таким образом, каждый игрок начинает, но продолжает играть даже после того, как div, содержащий его, скрыт.

Кстати, я использую версию плеера iframe по какой-то причине, поэтому ответы, говорящие мне «просто использовать версию встраивания флэш-объекта» плеера, неприемлемы для этого вопроса.

Код здесь, если jsfiddle недоступен: 

<html>
<body>
<script>
$(document).ready(function(){
// YouTube Player API adapter
$.getScript('http://www.youtube.com/player_api');

loadYouTubePlayer = function(playerID) {
  the_player = new YT.Player(playerID, {
    events: { 'onReady': playYouTubeVideo }
  });
};  

unloadYouTubePlayer = function(playerID) {
  // This is the part that's broken
  $(playerID).stopVideo();
}; 

function playYouTubeVideo(event) {
  event.target.playVideo();
}

$('.show_player').click(function() {
    var idType = 'data-video-id';
    var id = $(this).attr(idType);

    $(this).fadeOut('fast', function() {
        $('.hidden_player['+idType+'='+id+']').fadeIn('fast', function() {
            loadYouTubePlayer('the_player'+id);
            $('.stop_player['+idType+'='+id+']').fadeIn('fast');
        });
    });
});

$('.stop_player').click(function() {
    var idType = 'data-video-id';
    var id = $(this).attr(idType);

    $(this).fadeOut('fast', function() {
        $('.hidden_player['+idType+'='+id+']').fadeOut('fast', function() {
            unloadYouTubePlayer('the_player'+id);
            $('.show_player['+idType+'='+id+']').fadeIn('fast');
        });
    });
});

});
</script>

<div class="hidden_player" data-video-id="0" style="display:none">
    <iframe id="the_player0" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
    <p><a href="#" class="show_player" data-video-id="0">Show video 0 and start playing automatically</a></p>
    <p><a href="#" class="stop_player" data-video-id="0" style="display:none">Stop video 0 from playing</a></p>

    <br/><br/>    

<div class="hidden_player" data-video-id="1" style="display:none">
    <iframe id="the_player1" width="640" height="360" frameborder="0" src="http://www.youtube.com/embed/2ktsHhz_n2A" type="text/html"></iframe>
</div>
    <p><a href="#" class="show_player" data-video-id="1">Show video 1 and start playing automatically</a></p>
    <p><a href="#" class="stop_player" data-video-id="1" style="display:none">Stop video 1 from playing</a></p>

</body>
</html>

1 Ответ

4 голосов
/ 23 сентября 2011

Я создал функцию, которая получает доступ к видео в кадрах YouTube через идентификатор родителя iframe (как указано в YT Frame API) и выполняет функции, определенные в JS API.

См. этот ответ для кода и подробного раздела вопросов и ответов.

Мой код будет реализован следующим образом: 

callPlayer(playerID, "stopVideo");
...