Javascript 使用外部按钮在iFrame内暂停YouTube视频

我正在使用此脚本在更改选项卡时停止youtube视频。 但它只适用于第一个视频。我错过了什么？ 或者，也可以通过单击来停止任何视频

你好，迈克尔

我使用的脚本：

<!--
@Author: Naveen
-->
<iframe id="youtube_player" width="640" height="360" src="http://www.youtube.com/embed/aHUBlv5_K8Y?enablejsapi=1&version=3&playerapiid=ytplayer"  allowfullscreen="true" allowscriptaccess="always" frameborder="0"></iframe>
<br />
<br />
<a id="stop" href="#"><strong>Stop The Video</strong></a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#stop').on('click', function() {
    //$('#popup-youtube-player').stopVideo();
 $('#youtube_player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
});
</script>

$（'#stop'）。在（'单击'，函数（）上）{
//$（“#弹出youtube播放器”）.stopVideo（）；
$（“#youtube_player”）[0].contentWindow.postMessage（“{”事件“：“命令”，“函数“：“+”停止视频“+”，“参数“：”）”}，“*”）；
});

---

网站：

您仅与jQuery选择器选择的第一个元素交互。这就是

$（“#youtube_player”）[0]

查看站点代码，一个快速修复方法可能是为每个停止选项卡分别执行事件处理程序

$('#stop1').on('click', function() {
    //$('#popup-youtube-player').stopVideo();
 $('.youtube_player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
});


$('#stop2').on('click', function() {
    //$('#popup-youtube-player').stopVideo();
 $('.youtube_player')[1].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
});

如果你想让它更通用，显然需要做更多的工作。有多种方法可以做到这一点，您可以添加一个数据属性或类，以允许您链接选项卡链接和正在查看的特定播放器。类似于以下内容（未经测试的代码）：

然后将匹配的

数据playerref=“where”

放在停止链接和播放器上（请参阅）

我还想知道为什么你自己直接发送postMessage，而不是使用Google提供的YTPlayer javascript对象？您可以在此处查看文档：

我想你会发现这种行为更可靠，更容易编码。我相信您可以为每个视频创建一个播放器对象，并对要暂停的视频调用

player.pauseVideo（）

编辑：插入代码以停止所有视频

在您前面的评论之后，这里有一些将停止所有视频的插入代码：

//You will probably want to change 'li' to a more specific selector e.g. #navTab
jQuery('li').on('click', function() {
    jQuery('.youtube_player').each(function( index ){
        thisPlayer = jQuery('.youtube_player')[index];
        thisPlayer.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    });
});

我已经测试了这个，它将在你的网站上工作。您可能希望用更具体的内容替换（'li'）选择器

---

我用noConflict风格写了这篇文章（没有“$”），因为我注意到你的网站使用了它。这可能是脚本无法运行的另一个原因。

感谢您的回复和帮助。我不是程序员。事实上，我不会暂停某个特定的视频。我只是想在单击下一个视频的选项卡时停止当前播放的视频。（未来将有超过2个视频（标签）。你好，MichaelIf，如果你仍然感兴趣的话——我又看了一遍，这是一件很快就能完成的小事情，所以我写了一个在你的网站上可以使用的解决方案。你可以找个人来做这类事情。如果你需要一些关于Javascript的长期或深入的帮助，你可以给我发消息，我可以提供我的服务。我的电子邮件和推特都在简历中。嗨，克里斯，非常感谢你的帮助。我添加了你的代码，它工作得很完美。因为我也在论坛中帮助人们，所以我想问一下，我是否可以发布你的解决方案，并链接到你的个人资料。我愿意接受你的服务，发展未来的项目。当然。这很好：）确保人们知道需要在代码的第一行指定选择器。我将添加一条评论。

//You will probably want to change 'li' to a more specific selector e.g. #navTab
jQuery('li').on('click', function() {
    jQuery('.youtube_player').each(function( index ){
        thisPlayer = jQuery('.youtube_player')[index];
        thisPlayer.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
    });
});