Youtube Api多个视频使用ajax

Youtube Api multiple videos using ajax

本文关键字：ajax 视频 Api Youtube      更新时间：2023-09-26

我一直在尝试使用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并显示视频。有人能看到我在哪里走错了，或指出我在正确的方向上如何解决它??

我设法通过将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,
  });
 }
}
相关文章：