javascript - 使用外部按钮在 iFrame 中暂停 YouTube 视频

Question

我正在使用此脚本在更改选项卡时停止 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>

网站:www.natashatarasova.de

Answer 1

您仅与 jQuery 选择器选择的第一个元素进行交互。这就是$('#youtube_player')[0]

结尾的 [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":""}', '*');   
});

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

$('.stop').on('click', function() {
    var playeref = $(this).data('playerref');
 $('[data-playerref="'+ playerref + '"')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');   
});

然后您可以在停止链接和播放器上放置匹配的 data-playerref="whatever"(参见 Selecting element by data attribute)

我也想知道为什么你自己直接发送postMessage而不是使用谷歌提供的YTPlayer javascript对象？您可以在此处查看文档:https://developers.google.com/youtube/iframe_api_reference

我想您会发现这种行为更可靠且更易于编码。我相信然后您可以为每个视频创建一个播放器对象，并在您要暂停的视频上调用 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 风格(没有“$”)写这篇文章，因为我注意到您的网站使用了这种风格。这可能是您的脚本无法运行的另一个原因。