javascript - Youtube Media API无法正确加载。

Question

我已使用以下代码首先从Youtube API获取视频ID，然后使用Youtube Media APi在页面上加载媒体播放器:

    var qval = <?php echo "'{$name}'" ;?>;


    googleApiClientReady = function() {
      gapi.auth.init(function() {
        window.setTimeout(loadAPIClientInterfaces, 1);
      });
    }


    function loadAPIClientInterfaces() {
      gapi.client.load('youtube', 'v3', searchData);
    }


    function searchData() {
      var request = gapi.client.youtube.search.list({
         key    : "My_app_ID",
        q       : qval,
        part    : 'snippet',
        maxResults : 5
      });
      request.execute(function(response) {
            console.log(response);
                console.log(response['items'][1]['id']['videoId']);
                onYouTubeIframeAPIReady(response['items'][1]['id']['videoId']);

      });
    }

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onYouTubeIframeAPIReady(vid) {
          var newDiv = document.createElement('div');
          newDiv.setAttribute('id','newDiv');
          var prev = document.getElementById('player');
          prev.appendChild(newDiv);
          console.log(vid);
        player = new YT.Player('newDiv', {
          height: '390',
          width: '640',
          videoId : vid
        });
}

即使在功能onYouTubeIframeAPIReady()上的debub上，它也不会加载播放器，它确实加载了一个值，我可以直接在youtube链接中使用该值来获取视频。

Answer 1

进行了一些更改，就可以了:

googleApiClientReady = function() {

  gapi.auth.init(function() {
    window.setTimeout(loadAPIClientInterfaces, 1);
  });
}


function loadAPIClientInterfaces() {
  gapi.client.load('youtube', 'v3', searchData);
}


function searchData() {
  var qval=<?php echo "'{$name}'" ;?>   ;
  var request = gapi.client.youtube.search.list({
     key    : "my_app_key",
    q       : qval,
    part    : 'snippet',
    maxResults : 5
  });
  request.execute(function(response) {
        console.log(response);
        for(var i = 0; i < response['items'].length;i++){           
            console.log(response['items'][i]['id']['videoId']);
            var newDiv = document.createElement('div');
            var prev = document.getElementById('player');
            prev.appendChild(newDiv);
            onYouTubeIframeAPIReady(response['items'][i]['id']['videoId'],newDiv);
    }
  });
}

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady(vid,newDiv) {
          if (typeof vid != 'undefined'){
        player = new YT.Player(newDiv, {
          height: '390',
          width: '640',
          videoId : vid
        });
        } else {
            console.log(vid);       
        }           
}