暂停/播放多个嵌入式 youtube 播放器答案

【问题标题】：pause/play multiple embedded youtube players暂停/播放多个嵌入式 youtube 播放器
【发布时间】：2013-08-07 22:04:08
【问题描述】：

我有 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');
    });
};

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

【问题讨论】：

附带说明...您将无法在 iDevice 上自动播放。

标签： javascript jquery html video youtube

【解决方案1】：

您可以将 YouTube Player API 用于 iframe 嵌入。这里是reference。

您无需放置iFRAME 标记，而是使用带有一些JavaScript 代码的ID 和SCRIPT 标记创建空的DIV。然后代码生成一个iFRAME 并将其放置在DOM 上，删除早期创建的DIV 和SCRIPT 标记。这允许您在SCRIPT 标签中操作player。

这是jsFiddle 中的工作示例。

附：另请注意“要求”部分。

【讨论】：

【解决方案2】：

您需要使用 YouTube API。 Here is tutorial

【讨论】：