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

发布于 2024-12-05 23:26:57 字数 2819 浏览 1 评论 0原文

我正在尝试在单个页面上播放/停止多个 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>

原文

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

Here is the jsfiddle with what I am talking about: http://jsfiddle.net/iwasrobbed/9Dj8c/3/

So each player starts, but it continues to play even after the div containing it is hidden.

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.

Code here in case jsfiddle is not available:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

愁以何悠 2024-12-12 23:26:57

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

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

我的代码将以这种方式实现：

callPlayer(playerID, "stopVideo");

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.

See this answer for the code and a detailled Q&A section.

My code would be implemented in this way: