如何阻止嵌入式Youtube視頻同時播放

SoundCloud播放器具有默認功能，當用戶啓動播放器時，它會自動暫停所有正在播放的其他播放器。（例如：http://jsfiddle.net/Vx6hM/）。如何阻止嵌入式Youtube視頻同時播放

我試圖重新創建嵌入式YouTube視頻，通過正常的嵌入代碼動態添加。

使用此：https://stackoverflow.com/a/7513356/938089 這：https://stackoverflow.com/a/7988536/1470827

我能夠遠遠地得到這樣的：

function chain(){ 

$('.post').each(function(){ 
    var player_id = $(this).children('iframe').attr("id"); 
    var other_player_id = $(this).siblings().children('iframe').attr("id"); 

    player = new YT.Player(player_id, { 

     events: 
      {  
      'onStateChange': function (event) 
       { 

       if (event.data == YT.PlayerState.PLAYING) 
        { callPlayer(other_player_id , 'pauseVideo'); 
        alert('Trying to pause: ' + other_player_id); 
        }    

       } 
      }   
    }); 

}); 

}

這裏有一個JS斌用了一半的工作：http://jsbin.com/oxoyes/2/edit

目前，它唯一的召喚其中一個球員。我需要它暫停所有其他玩家，除了玩牌之外。

此外，如何清理和/或做不同/更好的任何提示，都歡迎。我對JavaScript仍然很陌生，所以我甚至不確定我會以正確的方式開展工作。

謝謝！

來源

2012-10-21 Mye

我寫了一篇博客文章，詳細介紹了響應各種Youtube播放器API事件的完整工作示例：http://www.objectpartners.com/2013/08/21/triggering-a-youtube-video-從點擊一個按鈕的圖像和替換完成時/ –

你只能最多隻能有一個玩家在指定時間播放。不要試圖暫停所有正在播放的東西，而應該將其視爲試圖暫停播放。當然，沒有人可以玩。鑑於此，請看下面的代碼。您需要維護一個外部範圍變量，並在需要時暫停，並將其設置爲剛剛開始播放的播放器。

var playerCurrentlyPlaying = null; 
function chain(){  
    $('.post').each(function(){ 
     var player_id = $(this).children('iframe').attr("id"); 
     player = new YT.Player(player_id, { 
      events: 
       {  
       'onStateChange': function (event) 
        { 

        if (event.data == YT.PlayerState.PLAYING) 
         { 
          if(playerCurrentlyPlaying != null && 
          playerCurrentlyPlaying != player_id) 
          callPlayer(playerCurrentlyPlaying , 'pauseVideo'); 
          playerCurrentlyPlaying = player_id; 

         }    

        } 
       }   
     }); 
    }); 
}

來源

2012-10-21 06:26:52 cbayram

完美的作品！ – Mye

我認爲這可能實現您的解決方案

var players=[]; 
function chain(id){ 


    var player_id = $('#player'+id).attr('id'); 


    players[id]=new YT.Player(player_id, { 

     events: 
      {  
      'onStateChange': onPlayerStateChange 
      } 

    }); 

} 

function onPlayerStateChange(event){ 


    var playerid=$(event.target).attr('id'); 

    if(event.data!=-1 && event.data!=5){ 

     for(i=1;i<players.length;i++){ 

     if(playerid!=i){ 


     players[i].stopVideo(); 
     } 

    } 


    } 
}

與你以前的代碼的問題是在哪裏調用函數使用每個所以它可能執行3 * 3次，創造了player.So的9個實例，你我所做的是我將每個實例存儲在一個數組中。

演示：http://jsbin.com/oxoyes/11/edit

來源

2012-10-21 06:14:22 fuzionpro

我試過cbayram發佈的方式，發現它有點成功。我更喜歡fuzionpro的方式，但不得不糾正一些問題瓦特/它，我想出了以下，這很好，幷包括console.logs，所以你可以看到發生了什麼。將ytPlayers和ytPlayerStates結合起來可能會更有效率。

// load the IFrame Player API code asynchronously 
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 ytPlayers = new Array(); 
var ytPlayerStates = new Array(); 

window.onYouTubePlayerAPIReady = function() 
{ 
    jQuery('.video-container>iframe').each(function(index) 
    { 
     var iframeID = jQuery(this).attr('id'); 
     ytPlayerStates[iframeID] = -1; 

     (function (iframeID) { 
      ytPlayers.push(new YT.Player(iframeID, { 
       events: 
       {  
        'onStateChange' : function (event) 
        { 
         console.log(iframeID+' '+event.data); 

         if (event.data == 1) 
         { 
          ytPlayerStates[iframeID] = 1; 
          for (var key in ytPlayerStates) 
          { 
           if (key != iframeID) 
           { 
            if (ytPlayerStates[key] == 1 || ytPlayerStates[key] == 3) 
            { 
             ytPlayerStates[key] = 2; 
             callPlayer(key, 'pauseVideo') 
            } 
           } 
           console.log(key+' : '+ytPlayerStates[key]); 
          }; 
         } 
        } 
       } 
      })); 
     })(iframeID); 
    }); 
}

來源

2014-05-21 05:30:42

如何阻止嵌入式Youtube視頻同時播放

回答

相關問題