Youtube api - 停止视频答案

【问题标题】：Youtube api - stop videoYoutube api - 停止视频
【发布时间】：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":""}', '*');

标签： javascript api video youtube

【解决方案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" width="640" height="390">
</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> 标记位置。

【讨论】：