1

我已经用谷歌搜索了一段时间，但我的问题没有得到任何好的结果。我还多次准备了来自 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，我不知道我做错了什么。如果有人可以帮助我，我将不胜感激。

4

2 回答 2

1

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

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

    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 中（正如我在这个答案中描述的那样）。

您需要加载这些脚本：

<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>

你可以在这里、这里和这里得到它们。（这个 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）的视频，您将能够轻松地调整代码。

于 2012-11-29T03:22:05.070 回答
0

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

<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>
于 2012-11-28T15:02:55.197 回答