Youtube api - 停止视频
Posted
技术标签:
【中文标题】Youtube api - 停止视频【英文标题】：Youtube api - stop video 【发布时间】：2011-10-04 00:21:31 【问题描述】：我需要一些有关 Youtube API 和嵌入视频的帮助。 我想在单击某些元素（div、link、td 等）时停止视频。我现在正试图让它只为 1 个视频工作，但这个脚本的最终功能应该是停止当前页面上加载的所有视频。我已经阅读了 YT API 文档，但我真的是 JS 的初学者，所以对我来说仍然很难理解。
<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<a href="javascript:ytplayer.stopVideo()">Play</a>
<br/>
<iframe id="ytplayer" src="http://www.youtube.com/embed/8Ax-dAR3ABs?rel=0&iv_load_policy=3&showinfo=0&enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash" frameborder="0" allowscriptaccess="always"></iframe>
</body>
</html>
提前感谢您的任何建议
【问题讨论】：
使用callPlayer("ytplayer", "stopVideo"); 使用来自Youtube iframe API: how do I control a iframe player that's already in the HTML? 的小函数。
您可以尝试使用这样的事件：$("#ytplayer")[0].contentWindow.postMessage('"event":"command","func":"stopVideo", "args":""', '*');
【参考方案1】：
如果您使用 iframe 嵌入它，您将无法控制它。您必须使用对象嵌入，如下所示：
<object id="ytplayer" style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/8Ax-dAR3ABs?version=3&enablejsapi=1">
<param name="allowScriptAccess" value="always">
<embed id="ytplayer" src="http://www.youtube.com/v/8Ax-dAR3ABs?version=3&enablejsapi=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" >
</object>
您的其余代码通常应该在那之后工作，尽管它可能需要更新为：
<a href="javascript:document.getElementById('ytplayer').stopVideo()">Play</a>
另外，您看过演示网站吗？ http://code.google.com/apis/youtube/youtube_player_demo.html
【讨论】：
感谢您的快速回答，但它仍然对我不起作用。我已经尝试过其他 swfobjects、对象嵌入、更改代码和 ofc 我已经看到了演示站点，但我无法找出他们是如何播放/暂停/停止按钮的，甚至从他们的 html/js 代码中也没有.我认为我的问题更可能是微不足道的（像往常一样），也许我会尝试再次阅读文档并解决它。 我看到了你的 swfobject 链接。你为什么不发布一个 jsfiddle 与你所拥有的，我们可以解决它？ 您现在实际上可以在 iframe 中控制嵌入的 YouTube 视频：apiblog.youtube.com/2011/01/… 有一个实际的 Javascript API，说你必须使用 flash 对象是不正确的。 （在给出这个答案之前它也是可用的） 当心这个答案中的重复 ID，这是糟糕的 HTML。您在<embed> 对象上而不是在 <object> 上运行 API 命令，因此 id 应该在 embed 上。【参考方案2】：
我最近为此写了一个小 jquery，来自 youtube api
我想通过一个动作阻止所有视频播放
<html>
<head>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<!-- player divs -->
<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>
<a class="stop">Stop</a>
<script>
// load api
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// make player array
var players = new Array();
function onYouTubeIframeAPIReady()
players[0] = new YT.Player('player1',
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw'
);
players[1] = new YT.Player('player2',
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw'
);
players[2] = new YT.Player('player3',
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw'
);
$('.stop').click( function()
//loop players array to stop them all
$(players).each(function(i)
this.stopVideo();
);
);
</script>
</body>
</html>
或停止单个视频：
$('.stop').click( function()
playerVariableName.stopVideo();
);
【讨论】：
感谢您的代码示例 - 此代码在 Chrome 上运行不佳，但在 Safari 上运行良好。我将它与此页面上的 Jquery UI 选项卡结合使用 andrewwelch.info/filming-craftspeople-makers.php【参考方案3】：不熟悉 youtube api，但假设您的其他代码正确，这应该可以工作：
<script type="text/javascript">
player = document.getElementById('ytplayer');
function stop()
player.stopVideo();
return false;
</script>
<a href="#" onclick="stop()">Play</a>
将其插入您的<a href="javascript:ytplayer.stopVideo()">Play</a> 标记位置。
【讨论】：
以上是关于Youtube api - 停止视频的主要内容，如果未能解决你的问题，请参考以下文章
YouTube API OnStateChange 监听器在切换 SRC Attr 后停止工作
视频取消静音时无法通过 iframe API 播放 YouTube 视频