Youtube Api使用ajax的多個視頻

Question

我一直在嘗試使用YouTube API顯示多個視頻，視頻ID來自ajax調用。然而，我能得到的最好的只是加載一個視頻，而不是所有的視頻。

我在這裏看到了一些類似的問題，這是因爲API就緒函數只能運行一次。我嘗試過把API準備函數移到循環外部，在ajax函數之外，爲id等創建一個數組...，但我嘗試過的其他任何東西，我最終都沒有顯示任何東西。

Ajax調用顯示一個內碼 -

success: function(data) { 
var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

$.each(data, function(i, itemList) { 
    var strList = ""; 
    for (i = 0; i < itemList.length; i += 1) { 
     item = itemList[i]; 
     video = item[4]; 
     window.onYouTubeIframeAPIReady = function() { 
      new YT.Player(i, { 
       height: '250', 
       width: '500', 
       playerVars: { 
        'rel': 0, 
        'showinfo': 0, 
        'frameborder': 0, 
        'modestbranding': 1 
       }, 
       videoId: video, 
       events: {} 
      }); 
     } 
     strList += "<div id=" + i + "></div><br/>"; 
    } 
    $("#random_list").html(strList); 
}); 
} 

三個div的正在創造很好，但只有最後一個被改變的iframe和顯示視頻。任何人都可以看到我去哪裏錯了或指向我如何解決它的正確方向？

Answer 1

我設法通過改變阿賈克斯成功修復它 -

success:function(data){ 
     var playerInfoList = []; 
     $.each(data, function(i, itemList) { 
      for (i = 0; i < itemList.length; i += 1) { 
       item = itemList[i]; 
       playerNo = i + 1; 
       playerInfoList.push({ 
        id: 'player' + playerNo, 
        videoId: item[4] 
       }); 
      } 
     }); 
     loadVideos(); 
    } 

其推動視頻細節到一個數組，然後調用loadVideo功能，然後創建的div和球員使用數組 -

function loadVideos() { 
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 strList = ''; 

window.onYouTubeIframeAPIReady = function() { 

     if (typeof playerInfoList === 'undefined') return; 
     for (var i = 0; i < playerInfoList.length; i++) { 
     vidNo = i + 1; 
     strList += "<div id='player" + vidNo + "'></div><br/>"; 
     } 

     $("#video_list").html(strList); 

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

var players = new Array(); 

function createPlayer(playerInfo) { 
    return new YT.Player(playerInfo.id, { 
    videoId: playerInfo.videoId, 
    }); 
} 
}