Youtube 媒体 API 未正确加载。答案

【问题标题】：Youtube Media API not loading correctly.Youtube 媒体 API 未正确加载。
【发布时间】：2014-06-22 18:25:00
【问题描述】：

我使用以下代码首先从我的 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() vid 中的 debub 上，它也不会加载播放器，它确实加载了一个值，我可以直接在 youtube 链接中使用它来获取视频。

【问题讨论】：

标签： javascript youtube youtube-api youtube-data-api

【解决方案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);       
        }           
}

【讨论】：