Jquery 退出选项卡后停止youtube视频播放

我一直在寻找在我离开一个标签后阻止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>

内容
/*可能不止这些*/

还有我的脚本，我觉得很接近，但我得到了这样一条信息“uncaughttypeerror:player.stopVideo不是一个函数”

$（文档）.ready（函数（）{
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var stopVideos=函数（）{
$（'面板-2 iframe'）。每个（功能（i，el）{
如果（！window.YT）
返回；
var玩家=新的YT玩家（el）；
player.stopVideo（）；
});
}
$（“.change tab”）。在（'click'，function（）上{
停止视频（）；
}
});

我有一个用于此类用例的小片段。我已经为您将其包装在一个函数中。 支持和可靠性有限。当浏览器检测到选项卡焦点/模糊时，即用户切换到同一浏览器窗口中的另一个选项卡或最小化窗口时，浏览器可能会触发该选项卡焦点/模糊。 操作系统级别的事件，例如，当您在浏览器窗口顶部打开另一个窗口时（浏览器将检测到该窗口，但不会将其最小化），这超出了浏览器的范围。最简单的示例是，用户进入第二个监视器，并将其他应用程序置于焦点位置

在任何情况下，函数如下

    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);
      }
    };

---

你可以参考这篇文章：。建议的解决方法是检查你是否使用了其他脚本，这会弄乱整个YouTube的API

以下是另一个可能也会有所帮助的参考：

首先，删除origin参数将在开发过程中有所帮助，因为如果A）它不完全匹配，以及B）在localhost上时有时没有任何原因，它通常会阻止访问API

…创建一个YT.player对象需要花费一点时间，因此您需要在对象完全初始化之前尝试触发一个playVideo方法。相反，您应该使用YT.Player对象的onReady回调参数

---

希望这有帮助

所以我发现解决方案是因为这条线路不工作

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>

$（文档）.ready（函数（）{
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var stopVideos=函数（）{
$（'面板-2 iframe'）。每个（功能（i，el）{
如果（！window.YT）
返回；
el.contentWindow.postMessage（“{”事件“：”命令“，”函数“：”+”pauseVideo“+”，“参数“：”}'，“*”）；
});
}
$（“.change tab”）。在（'click'，function（）上{
停止视频（）；
}
});

谢谢你的回答。这个解决方案基本上和我做的一样，但问题是我得到了一个“未捕获类型错误：player.stopVideo不是一个函数”。你知道解决这个问题的方法吗？

<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>