標籤退出

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.

希望這有助於！