嵌入的 YouTube 视频不会在 Chrome 和 IE 中停止答案

【问题标题】：Embedded YouTube video doesn't stop in Chrome and IE嵌入的 YouTube 视频不会在 Chrome 和 IE 中停止
【发布时间】：2011-10-25 04:36:07
【问题描述】：

这方面的话题很少，但我没有答案。

在覆盖 div 中嵌入 youtube 视频：

   <div id="blanket" style="display:none;">
     </div>
        <div id="popUpDiv" style="display:none;">
        <a href="#" onclick="popup('popUpDiv')">Close</a>     
        <iframe width="480" height="390" src="https://www.youtube.com/embed/G5AuItKv?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>                                       
        </div>

在 Firefox 上，当我关闭窗口时，视频会停止，但在 chrome 或 Internet Explorer 中则不会。

当用户点击关闭时，我可以使用一些简单的 javascript 来阻止它吗？

TIA

编辑：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<a href="#" onclick="javascript:ytplayer.stop()">Close</a>

 <iframe width="480" height="390" src="http://www.youtube.com/e/PE1il5znICA?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0"  allowfullscreen></iframe>


 <script type="text/javascript">
function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("ytplayer");
}

function stop() {
  if (ytplayer) {
    ytplayer.stopVideo();
  }
}
</script>
</body>
</html>

【问题讨论】：

标签： javascript html youtube

【解决方案1】：

Youtube 有一个 javascript api，您可以启用它来停止视频。要启用 api，请将此参数：&enablejsapi=1 添加到您的 src url 的末尾，现在您可以通过 javascript 访问播放器。首先你需要获取玩家参考：

function onYouTubePlayerReady(playerId) {
    ytplayer = document.getElementById("nameofplayer");
}

现在您可以使用以下功能停止视频：

function stop() {
  if (ytplayer) {
    ytplayer.stopVideo();
  }
}

只需在 onclick 函数中调用 stop(); 即可关闭。

所有 youtube javascript api 信息都位于here。

【讨论】：

进一步检查 iframe youtube api 略有不同。请查看here，了解有关如何通过 javascript 访问播放器的更多信息。

【解决方案2】：

我在 HTML5 中遇到了同样的问题。 iframe 不适用于 Youtube API，您必须使用启用 JavaScript api 生成对象。

尝试改变：

<iframe width="480" height="390" src="http://www.youtube.com/e/PE1il5znICA?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0"  allowfullscreen></iframe>

到：

swfobject.embedSWF("http://www.youtube.com/e/PE1il5znICA?enablejsapi=1&version=3&playerapiid=ytplayer","ytplayer", "480", "390", "8", null, null, params, atts);

示例：

先将div添加到html中：

<div id="ytplayer">
<p>You need Flash player and JavaScript enabled to view this video.</p>
</div>

然后添加脚本创建对象并添加停止功能：

<script type="text/javascript">

    function onYouTubePlayerReady(playerId){ytplayer = document.getElementById("ytplayer");}
         var params = { allowScriptAccess: "always" };var atts = { id: "ytplayer" };


         swfobject.embedSWF("http://www.youtube.com/e/videoID?enablejsapi=1&version=3&playerapiid=ytplayer","ytplayer", "425", "356", "8", null, null, params, atts);

         function stop() {if (ytplayer) {ytplayer.stopVideo();}}
    </script>

为我工作。

【讨论】：