Javascript 使用 jQuery 播放/停止 YouTube 多个 iframe 播放器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7522997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery to play/stop YouTube multiple iframe players
提问by iwasrobbed
I am trying to play/stop multiple YouTube iframe players on a single page. I can start the players automatically (i.e. through a custom method called loadYouTubeVideo(playerID)) upon clicking, but I am not sure how I can get access to the player objects again from another function call (i.e. through a custom method called unloadYouTubeVideo(playerID))
我正在尝试在单个页面上播放/停止多个 YouTube iframe 播放器。我可以loadYouTubeVideo(playerID)在单击时自动启动播放器（即通过称为 的自定义方法），但我不确定如何从另一个函数调用（即通过称为 的自定义方法unloadYouTubeVideo(playerID)）再次访问播放器对象
Here is the jsfiddle with what I am talking about: http://jsfiddle.net/iwasrobbed/9Dj8c/3/
这是我正在谈论的 jsfiddle：http: //jsfiddle.net/iwasrobbed/9Dj8c/3/
So each player starts, but it continues to play even after the div containing it is hidden.
所以每个播放器都开始了，但即使在包含它的 div 被隐藏之后它也会继续播放。
By the way, I am using the iframe version of the player for a reason, so answers telling me to 'just use the flash object embed version' of the player are not acceptable for this question.
顺便说一下，我使用播放器的 iframe 版本是有原因的，所以这个问题不能接受告诉我“只使用播放器的 Flash 对象嵌入版本”的答案。
Code here in case jsfiddle is not available:
此处的代码以防 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>
回答by Rob W
I have created a function which access framed YouTube videos through the ID of the parent of the iframe (as specified in the YT Frame API), and executes the functions defined at the JS API.
我创建了一个函数，该函数通过 iframe 的父级 ID（如 YT Frame API 中指定的）访问带框的 YouTube 视频，并执行在 JS API 中定义的函数。
See this answerfor the code and a detailled Q&A section.
有关代码和详细的问答部分，请参阅此答案。
My code would be implemented in this way:
我的代码将以这种方式实现：
callPlayer(playerID, "stopVideo");
