javascript - 使用 ajax 的 Youtube Api 多个视频

Question

我一直在尝试使用 YouTube Api 来显示多个视频，视频 ID 来自 ajax 调用。然而，我能做到的最好的是它只加载一个视频，而不是所有视频。

我在这里看到了一些类似的问题，这是因为API就绪函数只能运行一次。我尝试过将 API Ready 函数移动到循环之外、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

我设法通过将 ajax success 更改为 -

    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,
  });
 }
}