Youtube Api 여러 동영상을 아약스를 사용하여

Question

나는 아약스 전화에서 오는 동영상 ID로 YouTube API를 사용하여 여러 동영상을 표시하려고 노력 해왔다. 그러나 내가 얻을 수있는 최선의 방법은 모든 비디오가 아닌 하나의 비디오 만로드하는 것입니다.

API 준비 함수는 한 번만 실행할 수 있기 때문에 비슷한 질문을 몇 번 보았습니다. 나는 API 준비 함수를 루프 바깥으로, 아약스 함수 바깥으로, 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이 변경되는 비디오를 표시. 누구든지 내가 잘못 가고있는 것을 보거나 그것을 고치는 법에 대한 올바른 방향으로 나를 가리킬 수 있습니까 ??

-

다음 배열로 비디오 내용을 밀어

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

가 다음 div의와 배열을 사용하여 플레이어를 만들 수있는 loadVideo 함수를 호출 -

Answer 1

나는에 아약스의 성공을 변경하여 그것을 해결하기 위해 관리

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