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>

脚本src：

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

js code im trying：

$(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播放器对象上调用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 } });。 YouTube API不会将其控制功能导出到iframe元素，当然也不会导出到jQuery。

不要自己创建iframe，而是尝试让YouTube API为您执行此操作，就像在YouTube iframe API文档中的basic example一样。

YT.Player

传递给<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>的第一个参数是您希望YouTube在其中放置视频的DOM元素。

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

您需要加载这些脚本：

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

您可以获取here，here和here。（这个回购是针对YouTube官方爆米花回购之前的一些错误修复。）

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

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

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

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

{{1}}

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>

如何在点击链接时停止YouTube视频？

2 个答案: