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

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

下面是我正在谈论的内容: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>

我创建了一个函数，该函数通过iframe父元素的ID(在YT Frame API中指定)访问框架YouTube视频，并执行在JS API中定义的函数。

请参阅这个答案的代码和详细的Q& a部分。

我的代码将这样实现:

callPlayer(playerID, "stopVideo");

相关内容

最新更新

热门标签：