Youtube Media API загружается неправильно.

Я использовал следующий код, чтобы сначала получить идентификатор видео из моего API Youtube, а затем использовал API Youtube Media для загрузки медиаплееров на моей странице:

    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 загружает значение, которое я могу напрямую использовать в ссылке на YouTube для получения видео.


javascript youtube-api youtube youtube-data-api
person darthsidious    schedule 06.05.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Сделал несколько изменений и стало нормально:

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);       
        }           
}
person darthsidious    schedule 06.05.2014