Youtube Api 多个视频使用 ajax

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

Youtube Api 多个视频使用 ajax

Youtube Api multiple videos using ajax

javascript

ajax

youtube-api

youtube-iframe-api