使用 jQuery 播放/停止 YouTube 多个 iframe 播放器答案

【问题标题】：Using jQuery to play/stop YouTube multiple iframe players使用 jQuery 播放/停止 YouTube 多个 iframe 播放器
【发布时间】：2011-11-23 07:01:33
【问题描述】：

我正在尝试在单个页面上播放/停止多个 YouTube iframe 播放器。我可以在单击时自动启动播放器（即通过一个名为loadYouTubeVideo(playerID) 的自定义方法），但我不确定如何从另一个函数调用再次访问播放器对象（即通过一个名为unloadYouTubeVideo(playerID) 的自定义方法）

这是我所说的 jsfiddle：http://jsfiddle.net/iwasrobbed/9Dj8c/3/

所以每个玩家都开始了，但即使在包含它的 div 被隐藏后它也会继续播放。

顺便说一句，我使用播放器的 iframe 版本是有原因的，所以告诉我“只使用播放器的 Flash 对象嵌入版本”的答案对于这个问题是不可接受的。

这里的代码以防 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>

【问题讨论】：

要全屏马赛克 rickroll，嗯？

标签： javascript jquery youtube youtube-api

【解决方案1】：

我创建了一个函数，该函数通过 iframe 的父级 ID（如 YT Frame API 中指定）访问帧化的 YouTube 视频，并执行在 JS API 中定义的函数。

有关代码和详细的问答部分，请参阅 this answer。

我的代码会这样实现：

callPlayer(playerID, "stopVideo");

【讨论】：

谢谢罗伯！这是一个很好的例子！