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，但只有最后一个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和player -

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的多个视频

1 个答案: