gpt4 book ai didi

javascript - 暂停/播放多个嵌入式YouTube播放器

转载 作者:行者123 更新时间:2023-12-03 06:33:15 30 4
gpt4 key购买 nike

我有2个缩略图链接,单击它们时,它们会以灯箱样式打开视频。我的目标是让它们在打开时播放,在关闭时暂停(单击背景区域时关闭)。

我的HTML代码在这里:

<body>
<div id="page">
<br /><br /><br /><br /><br />
<a id="1" class="thumbnail"rel="nofollow"><img class="img1" src="Resources/thumb1.jpg"/></a>
<a id="2"class="thumbnail"rel="nofollow"><img class="img1"src="Resources/thumb2.jpg" /></a>

<div class="backdrop"></div>

<div class="Video"id="vid1" >
<iframe allowscriptaccess="always" class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/7xHXpebWtus?enablejsapi=1" allowfullscreen="" frameborder="0" id="iframe1"> </iframe>
</div>

<div class="Video"id="vid2">
<iframe allowscriptaccess="always" class="youtube-player" type="text/html" width="560" height="315" src="http://www.youtube.com/embed/PnAsZ1Roxj4?enablejsapi=1" allowfullscreen="" frameborder="0" id="iframe2"> </iframe>
</div>

<br /><br /><br /><br />
<h1>More To Come</h1>

</div>

而我的Javascript:
$(document).ready(function(){

$('.thumbnail').click(function(){
var $id = $(this).attr('id');
$('.backdrop, #vid'+ $id).animate({'opacity':'.50'}, 300, 'linear');
$('#vid'+ $id).animate({'opacity':'1.00'}, 300, 'linear');
$('.backdrop, #vid'+ $id).css('display', 'block');
});

$('.backdrop').click(function(){
close_box();
});

});


function close_box()
{
$('.backdrop,.Video').animate({'opacity':'0'}, 300, 'linear', function(){
$('.backdrop,.Video').css('display', 'none');
});
};

我可能应该提到我对这些语言还很陌生!

最佳答案

您可以将YouTube Player API用于iframe嵌入。这是它的reference。不用放置iFRAME标记,而是使用DIVID标记以及一些JavaScript代码创建空的SCRIPT。然后,该代码生成iFRAME并将其放置在DOM上,删除早期创建的DIVSCRIPT标记。这使您可以操作player标记中的SCRIPT。这是jsFiddle中的工作示例。

附言另外,请注意“要求”部分。

关于javascript - 暂停/播放多个嵌入式YouTube播放器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18114603/

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