标签退出后停止播放 youtube 视频

Question

我一直在寻找在我离开标签后停止播放 youtube 视频的方法。问题是我发现的所有解决方案都需要我使用 jquery 添加到视频中。如下所示。

var player;  
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
     }
   });
 }

由于我所处环境的限制，我没有这个能力。 每个页面添加的视频数量未知，可能有 1、2 或 10 个，这取决于。

当我将标签切换到不显示视频的标签时，我需要一种方法来阻止视频播放。

我的设置如下

<div class="tabs-content">
  <div id="panel-1" class="tabs-panel">CONTENT</div>
  <div id="panel-2" class="tabs-panel">
    <iframe type="text/html" id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/l2cANlMm_OI?enablejsapi=1" frameborder="0"></iframe>
    <iframe type="text/html" id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/l2cANlMm_OI?enablejsapi=1" frameborder="0"></iframe>
    /* There could be more than this */
  </div>
</div>
<a class='change-tab' href="#"></a>

我认为我的脚本很接近，但我收到这条消息“Uncaught TypeError: player.stopVideo is not a function”

<script>
  $(document).ready(function(){
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var stopVideos = function() {
      $('#panel-2 iframe').each(function(i, el) {
        if(!window.YT)
        return;

        var player = new YT.Player(el);
        player.stopVideo();
      });
    }
    $(".change-tab").on('click',function() {
      stopVideos();
    }
  });
</script>

Answer 1

我有一个小型 sn-p 用于此类用例。我已经为你把它包装在一个函数中。 支持和可靠性是有限的。浏览器可以在检测到标签焦点/模糊时触发标签焦点/模糊，即用户切换到同一浏览器窗口中的另一个标签或当窗口最小化时。 操作系统级别的事件，例如，当您在浏览器窗口顶部打开另一个窗口（不最小化它，浏览器将检测到）时，这超出了浏览器的范围。最简单的例子是用户打开他的第二台显示器并引入其他一些应用程序。

无论如何，这里是函数

    function onWindowFocusAndBlur() {
      var hidden, visibilityChange;
      if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
        hidden = "hidden";
        visibilityChange = "visibilitychange";
      } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
      } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
      }

      function handleVisibilityChange() {
        if (document[hidden]) { // Tab doesn't have the focus
          // Pause the video here
          $('#panel-2 iframe').each(function(i, el) {
            if (!window.YT)
              return;

            var player = new YT.Player(el);
            player.stopVideo();
          });
        } else { // Wohoo, the tab is in focus
          // Play the video
        }
      }
      if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
        // Sadly the browser doesn't support this functionality. Damn legacy support

      } else {
        // Now that we have the support, let's attach the event listner to the document
        document.addEventListener(visibilityChange, handleVisibilityChange, false);
      }
    };

Answer 2

您可以参考这篇 SO 帖子：Youtube API Uncaught TypeError: player.stopVideo is not a function。建议的解决方法是检查您是否使用了其他会弄乱整个 YouTube API 的脚本。

这是另一个可能也有帮助的参考：youtube API playVideo, pauseVideo and stopVideo not working

首先，删除 origin 参数将在开发过程中有所帮助，因为它通常会阻止对 API 的访问，如果 A) 它不完全匹配，并且 B) 有时在 localhost 上时无缘无故。

...创建 YT.player 对象会消耗一些时间，因此您会尝试在对象完全初始化之前触发 playVideo 方法。相反，您应该使用 YT.Player 对象的 onReady 回调参数。

希望这会有所帮助！

Answer 3

所以我发现解决方案是由于这条线不起作用

var player = new YT.Player(el);
player.stopVideo();

将其更改为以下行后，它可以完美运行

el.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');

所以最后的代码是这样的

<script>
  $(document).ready(function(){
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var stopVideos = function() {
      $('#panel-2 iframe').each(function(i, el) {
        if(!window.YT)
        return;

        el.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');
      });
    }
    $(".change-tab").on('click',function() {
      stopVideos();
    }
  });
</script>