播放新视频时停止所有视频
Posted
技术标签:
【中文标题】播放新视频时停止所有视频【英文标题】：stop all videos when a new video is played 【发布时间】：2013-01-31 03:59:30 【问题描述】：我需要一些有关 Youtube API 和嵌入视频的帮助。当单击新的 youtube 视频时，我想停止在当前页面上运行的所有 iframe 视频（这里我只拍摄了 3 个，但有几个视频）。在某个时间点，只能运行一个 iframe youtube 视频。我已经阅读了文档 [https://developers.google.com/youtube/js_api_reference][1] 并且能够写到这里......
更新：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
var player;
function onYouTubeIframeAPIReady()
player = new YT.Player('player',
events:
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
);
var done = false;
function onPlayerStateChange(event)
if (event.data == YT.PlayerState.PLAYING && !done)
alert("hi5");
player1.stopVideo();
player2.stopVideo();
done = true;
</script>
</head>
<body>
<div>TODO write content</div>
<ul class="image-grid" id="list">
<li>
<iframe id="player" src="http://www.youtube.com/embed/erDxb4IkgjM?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
</li>
<li>
<iframe id="player1" src="http://www.youtube.com/embed/wSrA5iQGlDc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
</li>
<li>
<iframe id="player2" src="http://www.youtube.com/embed/c7b_WLkztXc?rel=0&wmode=Opaque&enablejsapi=1;showinfo=0;controls=0" frameborder="0" allowfullscreen></iframe>
</li>
</ul>
</body>
</html>
更新
-
onStateChange 事件未触发（工作）
在这个例子中，我有 3 个视频，实际上它有更多视频，而不是为每个视频编写 onPlayerStateChange..是否可以为所有视频使用数组..在函数 onPlayerStateChange 中，编写 player[] .stopVideo() 和 this.playvideo().. 这类东西..（需要帮助）
请看这个小提琴http://jsfiddle.net/LakshmiV/kn5Sf/
请帮忙。
【问题讨论】：
【参考方案1】：你可以做这样的事情......
为每个 iframe 赋予一个类，以便可以将其识别为 youtube 播放器的 iframe。 这里我给了“yt_players”
现在你可以使用下面的代码了...
<script type="text/javascript">
players = new Array();
function onYouTubeIframeAPIReady()
var temp = $("iframe.yt_players");
for (var i = 0; i < temp.length; i++)
var t = new YT.Player($(temp[i]).attr('id'),
events:
'onStateChange': onPlayerStateChange
);
players.push(t);
onYouTubeIframeAPIReady();
function onPlayerStateChange(event)
if (event.data == YT.PlayerState.PLAYING)
var temp = event.target.a.src;
var tempPlayers = $("iframe.yt_players");
for (var i = 0; i < players.length; i++)
if (players[i].a.src != temp)
players[i].stopVideo();
</script>
已更新代码...这应该对您有所帮助。
在这里查看...http://jsfiddle.net/anubhavranjan/Y8P7y/
【讨论】：
您可以做的是调试事件参数中的数据并检查您是否可以看到正在播放的播放器。视情况而定，您可以尝试关闭和打开视频。 错过了对 onYouTubeIframeAPIReady() 的调用。立即查看 嘿，它正在工作...您需要等待，看看视频何时开始...如果您愿意，您甚至可以检查事件 YT.PlayerState.BUFFERING 并停止其他视频。是的，您可以将对象存储在数组中并获取 iframe 的 id 并相应地停止视频 现在看一下代码......它应该可以帮助你......还更新了链接jsfiddle.net/anubhavranjan/Y8P7y希望它有帮助 非常感谢阿努巴夫！它的工作就像一个魅力..我只能投票一次:(如果不是，我会给你 100 票..你的迅速反应和技术技能非常感谢！【参考方案2】：Coby 对https://***.com/a/13260520/835822 的类似问题的出色回答
使用 an attribute selector 您可以定位来自 Youtube 的任何 iframe，然后使用 jQuery's each 您可以遍历所有这些 iframe。
$(function()
$('iframe[src*="http://www.youtube.com/embed/"]').each(function(i)
this.contentWindow.postMessage('"event":"command","func":"pauseVideo","args":""', '*');
);
);
【讨论】：
很好的解决方案。我使用了'iframe[src*="//www.youtube.com/embed/"]'，这样 http 或 https 都可以工作。【参考方案3】：
好概念，但 event.target.a.src 不起作用！将其更改为 event.target.getVideoUrl() 并且工作正常。看看这里
function onPlayerStateChange(event)
if (event.data == YT.PlayerState.PLAYING)
var temp = event.target.getVideoUrl();
var tempPlayers = $("iframe.yt_players");
for (var i = 0; i < players.length; i++)
if (players[i].getVideoUrl() != temp) players[i].stopVideo();
http://jsfiddle.net/Y8P7y/82/
【讨论】：
以上是关于播放新视频时停止所有视频的主要内容，如果未能解决你的问题，请参考以下文章
Android切换Fragment时视频依旧在播放，没有正常的停止。