タブ終了後に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になる可能性があります。

動画を表示していないタブに切り替えたときに動画の再生を停止する方法が必要です。

私は近いと思いますが、私はこのメッセージを「キャッチされない例外TypeError：player.stopVideoは関数ではありません」を取得

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

そして、私のスクリプトを次のように私のセットアップがある私は

<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

は、だから私は解決策は、それが最終的なコードは、この

で完全に

el.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); 

働いていた次の行にそれを変更した後

var player = new YT.Player(el); 
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> 

Answer 2

そのような使用例に使用する小さなスニペットがあります。私はあなたのための関数でそれをラップしました。 サポートと信頼性には限りがあります。ブラウザーは、タブのフォーカス/ブラーを検出すると、ユーザーが同じブラウザー・ウィンドウ内の別のタブに切り替える、またはウィンドウが最小化されたときに、それを起動できます。 OSレベルのイベントのように、ブラウザウィンドウの上部に別のウィンドウを開くと（ブラウザが検出する最小限の状態ではない）、ブラウザの範囲外になります。最も簡単な例は、ユーザーが2番目のモニターに行って、他のアプリケーションにフォーカスを移すことです。いずれの場合においても

は、ここにあなたがこのSOポストを参照して機能

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

です：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.

ホープ、このことができます：

はここにも役立つかもしれない別の参照です！