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不是函数”

<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 Uncaught TypeError: player.stopVideo is not a function。建议的解决方法是检查您是否使用了其他可能会破坏整个YouTube API的脚本。

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

首先，删除origin参数在开发过程中会有所帮助，因为如果它完全不匹配，它会阻止对API的访问，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>

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

3 个答案: