标签退出后停止播放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>

我认为我的脚本很接近，但我收到此消息"未捕获的类型错误：播放器.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;
        var player = new YT.Player(el);
        player.stopVideo();
      });
    }
    $(".change-tab").on('click',function() {
      stopVideos();
    }
  });
</script>

Answer 1

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

无论如何，这是函数

    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 Uncatch TypeError：player.stopVideo不是一个函数。建议的解决方法是检查您是否正在使用其他脚本，这会弄乱整个YouTube的API。

这是另一个可能也有帮助的参考：youtube API playVideo，pauseVideo和stopVideo不起作用

首先，删除 origin 参数将在开发过程中有所帮助，因为如果 A( 它不完全匹配，以及 B( 有时在本地主机上无缘无故地阻止对 API 的访问。

。创建 YT.player 对象会消耗一些时间，因此您随后尝试在对象完全初始化之前触发 playVideo 方法。相反，您应该使用 YT 的 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>