gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 10:23:04 25 4
gpt4 key购买 nike

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

的自定义方法

这是我正在谈论的 jsfiddle:http://jsfiddle.net/iwasrobbed/9Dj8c/3/

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

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


如果 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 中定义的函数。

参见 this answer 获取代码和详细的问答部分。

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

callPlayer(playerID, "stopVideo");

关于javascript - 使用 jQuery 播放/停止 YouTube 多个 iframe 播放器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7522997/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com