Youtube API, gapi не определен?

Question

Я пытаюсь сделать Youtube API, и я чувствую, что у меня все работает, кроме этой щели и res? Он говорит, что gapi не определяется. Как я могу сделать эту работу?

function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res} 

$(function() { 
    $("form").on("submit", function(e) { 
     e.preventDefault(); 
     // prepare the request 
     var request = gapi.client.youtube.search.list({ 
      part: "snippet", 
      type: "video", 
      q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"), 
      maxResults: 3, 
      order: "viewCount", 
      publishedAfter: "2015-01-01T00:00:00Z" 
     }); 
     // execute the request 
     request.execute(function(response) { 
      var results = response.result; 
      $("#results").html(""); 
      $.each(results.items, function(index, item) { 
      $.get("tpl/item.html", function(data) { 
       $("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}])); 
      }); 
      }); 
      resetVideoHeight(); 
     }); 
    }); 

    $(window).on("resize", resetVideoHeight); 
}); 

function resetVideoHeight() { 
    $(".video").css("height", $("#results").width() * 9/16); 
} 

function init() { 
    gapi.client.setApiKey("AIzaSyD646m4ZfK5yKBZj9p95LohN-PTUnRHBRY"); 
    gapi.client.load("youtube", "v3", function() { 
    }); 
} 

Answer 1

gapi является объектом, созданным с помощью API Google библиотеки JavaScript, которая управляет всеми взаимодействиями (т.е. все делает тяжелую работу запросов) для вас. Если объект не определен, вы, возможно, не включили библиотеку на свою страницу. Где-то в вашем HTML, вам нужен сценарий тег, который загружает библиотеку, расположенную по адресу:

https://apis.google.com/js/client.js

Обратите внимание, что, при загрузке библиотеки с тега сценария, вы также должны передать его обратный вызов ... это функция, которая будет автоматически вызвана, как только библиотека будет загружена. Так что в вашем случае, ваш метод Init() является то, что обратный вызов, и поэтому ваш сценарий тег будет выглядеть следующим образом:

<script src="https://apis.google.com/js/client.js?onload=init"></script> 

Браузер получит библиотеку, загрузить его, а затем запустить Init(), когда библиотека сделана загрузка, и все будет готово к выполнению вашей формы при запуске.