标签退出

Question

后停止播放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> 

而且我的剧本，我认为是接近，但我得到这个消息“遗漏的类型错误：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

于是我找到了解决这一行不是工作

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> 

Answer 2

我有一小段我用于这种用例。我已经将它包装在一个函数中。 支持和可靠性是有限的。浏览器可以在检测到标签焦点/模糊时触发标签，即用户切换到同一浏览器窗口中的另一个标签或窗口最小化时。 当您在浏览器窗口之上打开另一个窗口（而不会使浏览器将检测到的最小化）时，操作系统级别的事件就像在浏览器范围之外。最简单的例子就是用户要去看他的第二台显示器，并引入其他应用程序。

在任何情况下，这里是功能

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 3

您可以使用此SO职位是指：Youtube API Uncaught TypeError: player.stopVideo is not a function。建议的解决方法是检查您是否在使用其他脚本来搞乱整个YouTube的API。

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

First of all, removing the origin parameter will help during development, as it prevents access to the API in general if A) it doesn't match exactly, and B) sometimes for no reason when on localhost.

...creating a YT.player object consumes a bit of time, and so you then are trying to trigger a playVideo method before the object is fully initialized. Instead you should utilize the onReady callback parameter of the YT.Player object.

希望这有助于！