单击链接时如何停止 youtube 视频？

Question

我已经用谷歌搜索了一段时间，但我的问题没有得到任何好的结果。我还多次准备了来自 gdocs 的 youtube api 参考。

我试图通过点击一个链接来停止一个 youtube 视频。

html:

<div class="box_filme rel_trailer">
    <iframe id="iframe_player" width="420" height="315" src="http://www.youtube.com/embed/8Af372EQLck?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
</div>

脚本来源：

<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>

我正在尝试的 js 代码：

$(function(){
   $('.info_filme .filme').click(function(){
        $('iframe_player').stopVideo();
   });
});

放置点击的html部分

<ul class="info_filme">
    <li><a class="filme sinopse active" data-info="rel_sinopse">Sinopse</a></li>
    <li><a class="filme trailer" data-info="rel_trailer">Trailer</a></li>
    <li><a class="site" href="">Site</a></li>
</ul>

事实上，我成功地从 js 调用了 url 链接，但我必须使用 iframe，我不知道我做错了什么。 如果有人可以帮助我，我将不胜感激。

Answer 1

问题是您在 jQuery 对象上调用 .stopVideo()，而不是在 YouTube 播放器对象上。 YouTube API 不会将其控制功能导出到 iframe 元素，当然也不会导出到 jQuery。

与其自己创建 iframe，不如让 YouTube API 为您完成，就像 YouTube iframe API 文档中的 basic example 一样。

    var player = new YT.Player($('.rel_trailer')[0], {
      height: '315',
      width: '420',
      videoId: '8Af372EQLck',
      events: {
        'onReady': function() {
            $('.info_filme .filme').click(function(){
                player.stopVideo();
            });
        },
        'onStateChange': onPlayerStateChange
      }
    });

传递给YT.Player 的第一个参数是您希望YouTube 在其中放置视频的DOM 元素。

YouTube API 有点棘手，因为它所做的很多事情都是异步的。如果你想要更简单的东西，Popcorn.js 可以将 YouTube 播放器封装在一个模仿 HTML 视频元素的 API 中（正如我在 this answer 中描述的那样）。

您需要加载这些脚本：

<script type="text/javascript" src="popcorn.js"></script>
<script type="text/javascript" src="popcorn._MediaElementProto.js"></script>
<script type="text/javascript" src="popcorn.HTMLYouTubeVideoElement.js"></script>

您可以获取它们here、here 和here。 （这个 repo 是 YouTube 官方 Popcorn repo 之前的一些错误修复。）

接下来，只需为视频提供一个空元素。

<div class="box_filme rel_trailer"></div>

现在，创建包装器并附加点击处理程序。

var video = Popcorn.HTMLYouTubeVideoElement($('.rel_trailer')[0]);
video.src = 'http://www.youtube.com/watch?v=8Af372EQLck';

$('.info_filme .filme').click(function(){
    video.pause();
});

Popcorn 将处理加载 YouTube 的 API 以及随后的所有异步事件。如果您不打算使用 Popcorn 的主要注释功能，则需要加载大量不必要的 javascript，但如果您不想被 YouTube 的 API 困扰，它会为您节省大量时间。如果您想获得来自多个来源（例如 HTML5、Vimeo）的视频，您将能够轻松地调整代码。

Answer 2

您为什么不将视频嵌入到您的页面中，如下所示？

<embed id="playerid" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" quality="high" bgcolor="#000000" name="playerid" style="" src="http://www.youtube.com/apiplayerbeta?enablejsapi=1&playerapiid=normalplayer" type="application/x-shockwave-flash">

然后您可以使用以下命令停止视频：

var myPlayer = document.getElementById('playerid');

<a href="#" onclick="myPlayer.stopVideo();">Stop Video</a>