如何在不重疊音頻的情況下顯示多個YouTube視頻

Question

我有一個包含幾個YouTube視頻嵌入代碼的頁面。當用戶在一個視頻上單擊「>播放」時，頁面上的每個其他視頻都需要暫停，否則它們的音頻會重疊剛剛播放的新視頻。

什麼是最有效的實現方式？

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文件，嵌入的YouTube像這樣。請確保您有enablejsapi = 1是在URL的末至YouTube的文件：

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