複数の動画、プレーヤー名、イベントをYouTube API経由で動的に追加/

Question

私は、新しいYT.Playerに渡すためのプレーヤーの配列を作ろうとしています。私は 'player1'を未定義にし続け、iFrameは指定された 'playerInfo.id'に決して追加されません。

私のコードは、player2またはplayer3せずに簡単にするために含ま：

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 playerInfoList = [ 
{playerName: 'player1', id: 'container1', videoId: 'WPvGqX-TXP0', eventId: 'playerOneReady'}, 
{playerName: 'player2', id: 'container2', videoId: 'Yj0G5UdBJZw', eventId: 'playerTwoReady'}, 
{playerName: 'player3', id: 'container3', videoId: '9gTw2EDkaDQ', eventId: 'playerThreeReady'}]; 

var players = new Array(); 

function onYouTubeIframeAPIReady() { 
    if (typeof playerInfoList === 'undefined') return; 

    for (var i = 0; i < playerInfoList.length; i++) { 
     var generatePlayers = createPlayer(playerInfoList[i]); 
     players[i] = generatePlayers; 
    } 
} 

function createPlayer(playerInfo) { 
    playerInfo.playerName = new YT.Player(playerInfo.id, { 
     height: '390', 
     width: '640', 
     videoId: playerInfo.videoId, 
     events: { 
      'onReady': playerInfo.eventId 
     } 
    }); 
} 

// When the Players are ready. 
var duration1; 

function playerOneReady() { 
    duration1 = player1.getDuration(); 
} 

function play(playerNum) { 
    playerNum.seekTo(0); 
    playerNum.playVideo(); 
} 

$('#player1-trigger').click(function(){ 
    play(player1); 
} 

は、私はそれが戻ってくるように未定義続ける理由はわかりません。私はうまく動作する単純な構造を持っているが、それは各プレーヤーを手動で追加することを必要とし、より動的/効率的にしようとしている。これは動的よりも効率的ですが。

Answer 1

私はあなたがcreatePlayer関数で間違いを犯しているのを見ています。 player1という名前のプレーヤーを作成しようとしているときに、新しいYT.playerを実際にplayerInfo.playernameの場所に保存しています。このように直接テ選手リストに保存する方がよいでしょう。そして、

function onYouTubeIframeAPIReady() { 
if (typeof playerInfoList === 'undefined') return; 

for (var i = 0; i < playerInfoList.length; i++) { 
    var generatePlayers = createPlayer(playerInfoList[i],i); 
} 
} 

function createPlayer(playerInfo, locationInList) { 
players[locationInList] = new YT.Player(playerInfo.id, { 
    height: '390', 
    width: '640', 
    videoId: playerInfo.videoId, 
    events: { 
     'onReady': playerInfo.eventId 
    } 
}); 
} 

とのプレーヤーのために呼び出すときに使用します。

$('#player1-trigger').click(function(){ 
play(players[1]); 
} 

コードをより効率的にするとき、私は示唆している将来/ダイナミックについて/複数の小さな変更を行い、コードがまだ動作している場合はすべての変更後にテストすることができます。そうすれば、壊れたものを見つけるのが簡単になります。