オーディオを重複させずに複数のYouTube動画を表示するには

Question

私はいくつかのYouTube動画埋め込みコードのページを持っています。ユーザーが1つのビデオで[>再生]をクリックすると、そのページの他のすべてのビデオが一時停止する必要があります。

これを実装する最も効率的な方法は何ですか？

Answer 1

ここでは、いくつかのコードからいくつかのコードに従ってきた解決策を紹介します。あなたの.jsファイルで

次の行を追加します。

var videos = {}; 

$(document).ready(function(){ 
    // assigns ids to all the embed tags 
    var i = 0; 
    $('embed').each(function() { 
    $(this).attr('id', "embed"+i); 
    i++ 
    }); 
}); 

function onYouTubePlayerReady(playerId) { 

    // loop through all embed tags assign a listener object only if not already assigned 
    $('embed').each(function() { 
    var embedid = $(this).attr('id'); 
    var ytplayer = document.getElementById(embedid); 
    if (videos[embedid] == undefined) { 
     window["dynamicYouTubeEventHandler" + embedid] = function(state) { onytplayerStateChange(state, embedid); } 
     ytplayer.addEventListener("onStateChange", "dynamicYouTubeEventHandler"+embedid); 
    } 
    videos[embedid] = true; 
    }); 
} 

function onytplayerStateChange(newState, playerId) { 
    // If one of the videos was played 
    if (newState == 1) { 
     // loop through each of the embed tags 
     $('embed').each(function() { 
      var embedid = $(this).attr('id'); 
      var ytplayer = document.getElementById(embedid); 
      // Only pause video if not the current player 
      if(embedid != playerId) { 
       var current_state = ytplayer.getPlayerState(); 
       // Only pause if not already started 
       if (current_state != '-1') { ytplayer.pauseVideo(); } 
      } 
     }); 
    } 
} 

その後、あなたのhtmlファイルでは、そのようなあなたのユーチューブを埋め込みます。あなたはenablejsapi = 1は、YouTubeのファイルへのURLの末尾にある持っていることを確認してください：

<object width="500" height="400"> 
    <param name="movie" value="http://www.youtube.com/v/ms6GAdy6dag?version=3&amp;enablejsapi=1"> 
    <param name="allowFullScreen" value="true"> 
    <param name="allowscriptaccess" value="always"> 
    <param name="wmode" value="transparent"> 
    <embed src="http://www.youtube.com/v/ms6GAdy6dag?version=3&amp;enablejsapi=1" type="application/x-shockwave-flash" width="500" height="400" wmode="transparent" allowscriptaccess="always" allowfullscreen="true"> 
</object> 


<object width="500" height="400"><param name="movie" value="http://www.youtube.com/v/PegET_3FFAs?version=3&amp;enablejsapi=1"> 
    <param name="allowFullScreen" value="true"> 
    <param name="allowscriptaccess" value="always"> 
    <param name="wmode" value="transparent"> 
    <embed src="http://www.youtube.com/v/PegET_3FFAs?version=3&amp;enablejsapi=1" type="application/x-shockwave-flash" width="500" height="400" wmode="transparent" allowscriptaccess="always" allowfullscreen="true"> 
</object>