youtube api v3 поиск по ключевому слову javascript

Пример javascript для «поиска по ключевому слову», приведенный на странице разработчиков Google, у меня не работает. https://developers.google.com/youtube/v3/code_samples/javascript Когда я запускаю код, я получаю отключенное окно поиска с «кошками» внутри. Кроме того, в примере не объясняется, как писать ключ API, а не идентификатор клиента. Он говорит, что это возможно, но не дает конкретного примера того, как это сделать. Может кто-нибудь указать, где этот код идет не так. Код для двух файлов .js и html выглядит следующим образом:

файл auth.js:

// The client ID is obtained from the Google Developers Console
// at https://console.developers.google.com/.
// If you run this code from a server other than http://localhost,
// you need to register your own client ID.
var OAUTH2_CLIENT_ID = '__YOUR_CLIENT_ID__';
var OAUTH2_SCOPES = [
  'https://www.googleapis.com/auth/youtube'
];

// Upon loading, the Google APIs JS client automatically invokes this callback.
googleApiClientReady = function() {
  gapi.auth.init(function() {
    window.setTimeout(checkAuth, 1);
  });
}

// Attempt the immediate OAuth 2.0 client flow as soon as the page loads.
// If the currently logged-in Google Account has previously authorized
// the client specified as the OAUTH2_CLIENT_ID, then the authorization
// succeeds with no user intervention. Otherwise, it fails and the
// user interface that prompts for authorization needs to display.
function checkAuth() {
  gapi.auth.authorize({
client_id: OAUTH2_CLIENT_ID,
scope: OAUTH2_SCOPES,
immediate: true
  }, handleAuthResult);
}

// Handle the result of a gapi.auth.authorize() call.
function handleAuthResult(authResult) {
 if (authResult && !authResult.error) {
// Authorization was successful. Hide authorization prompts and show
// content that should be visible after authorization succeeds.
$('.pre-auth').hide();
$('.post-auth').show();
loadAPIClientInterfaces();
} else {
// Make the #login-link clickable. Attempt a non-immediate OAuth 2.0
// client flow. The current function is called when that flow completes.
$('#login-link').click(function() {
  gapi.auth.authorize({
    client_id: OAUTH2_CLIENT_ID,
    scope: OAUTH2_SCOPES,
    immediate: false
    }, handleAuthResult);
  });
 }
}

// Load the client interfaces for the YouTube Analytics and Data APIs, which
// are required to use the Google APIs JS client. More info is available at
// http://code.google.com/p/google-api-javascript-client   /wiki/GettingStarted#Loading_the_Client
function loadAPIClientInterfaces() {
gapi.client.load('youtube', 'v3', function() {
handleAPILoaded();
 });
}

файл search.js:

// After the API loads, call a function to enable the search box.
function handleAPILoaded() {
  $('#search-button').attr('disabled', false);
}

// Search for a specified string.
function search() {
  var q = $('#query').val();
  var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet'
 });

 request.execute(function(response) {
var str = JSON.stringify(response.result);
$('#search-container').html('<pre>' + str + '</pre>');
 });
}

search.html

<!doctype html>
<html>
 <head>
<title>Search</title>
</head>
<body>
<div id="buttons">
  <label> <input id="query" value='cats' type="text"/><button id="search-button"  disabled onclick="search()">Search</button></label>
</div>
<div id="search-container">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="auth.js"></script>
<script src="search.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady">  </script>
</body>
</html>

person user3080392    schedule 17.11.2014    source источник


Ответы (3)


Документация немного вводит в заблуждение (можно даже сказать неверную); HTML для «поиска по ключевому слову» загружает тот же «auth.js», что и два других примера на этой странице, но в нем нет никаких элементов HTML, которые фактически запускали бы процесс входа в систему (т. е. «кнопка входа в систему» ", если пользователь еще не авторизован), как в двух других примерах. По сути, если вы используете предоставленный auth.js, вам нужно иметь в своем HTML раздел, который выглядит следующим образом:

<div id="login-container" class="pre-auth">
  This application requires access to your YouTube account.
  Please <a href="#" id="login-link">authorize</a> to continue.
</div>

Затем вы также можете добавить класс «post-auth» в новый div, который охватывает ваши существующие кнопки и контейнер поиска. В этом случае демо-версия при посещении пользователем будет отображать только ссылку для входа; при нажатии и когда пользователь разрешает авторизацию, ссылка для входа будет скрыта, и будет отображаться ваша область поиска (и кнопка активна). Именно так устроена демонстрация.

Конечно, поиск по ключевому слову НЕ требует oAuth2, и поэтому (чтобы ответить на ваш второй вопрос) вам может быть проще: A) удалить метод handleApiLoaded (чтобы ваша кнопка никогда не отключалась) и B) вызвать gapi.client.load() вручную (т.е. не срабатывает при успешном прохождении oAuth). Затем вызовите gapi.client.setApiKey({YOUR KEY}), чтобы все ваши запросы включали ваш ключ в свои заголовки.

person jlmcdonald    schedule 19.11.2014

Большое спасибо jlmcdonald за вашу помощь. Мне потребовалось некоторое время, чтобы понять вторую часть вашего ответа, но, наконец, я добился успеха. Следующий html заставляет работать пример на веб-странице разработчиков Google. Обратите внимание, что сначала я получал ошибку 401. Чтобы исправить это, мне пришлось зайти в консоль разработчиков Google и выбрать свой проект. Затем перейдите на экран APIs&auth->consent и введите адрес электронной почты и название продукта:

<!doctype html>
<html>
  <head>
  <title>Search</title>
  </head>
  <body>
   <div id="login-container" class="pre-auth">
   This application requires access to your YouTube account.
   Please <a href="#" id="login-link">authorize</a> to continue.
  </div>
  <div id="buttons" class="post-auth">
  <label> <input id="query" value='cats' type="text"/><button id="search-button"  disabled onclick="search()">Search</button></label>
  </div>
  <div id="search-container">
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="/files/theme/auth.js"></script>
  <script src="/files/theme/search.js"></script>
  <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> </script>
</body>
</html>

Как вы отметили в своем ответе, oAuth2 не требуется для простого поиска по ключевым словам. Ниже приведен некоторый html, который просто использует ключ API. Я не ссылался на два файла .js, как раньше, а просто включил скрипт в html. Ваше сообщение на gapi.client.youtube не определено? действительно помогло мне понять это:

<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
  <div id="buttons">
  <label> <input id="query" value='cats' type="text"/><button id="search-button"  onclick="keyWordsearch()">Search</button></label>
  </div>
  <div id="search-container">
  </div>

  <script>
    function keyWordsearch(){
            gapi.client.setApiKey('API key here');
            gapi.client.load('youtube', 'v3', function() {
                    makeRequest();
            });
    }
    function makeRequest() {
            var q = $('#query').val();
            var request = gapi.client.youtube.search.list({
                       q: q,
                    part: 'snippet'                        
            });
            request.execute(function(response) {
                    var str = JSON.stringify(response.result);
                    $('#search-container').html('<pre>' + str + '</pre>');
            });
    }
 </script>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> </script>
</body>
</html>

Теперь, когда у меня есть часть поиска, не могли бы вы объяснить, как я могу отображать миниатюры и заголовки результатов, а затем, когда я нажимаю на них, видео открывается во встроенном проигрывателе на той же странице? Спасибо.

person user3080392    schedule 19.11.2014

Спасибо за вашу кодировку. Позвольте мне поделиться своим кодом:

function makeRequest(){
      var q = $('#query').val();
      var request = gapi.client.youtube.search.list({
          q: q,
          part: 'snippet'                        
      });
      request.execute(function(response){
          var str = JSON.stringify(response.result,'',4);
          $('#search-container').val( str);
          makeControl(response);
      });
  }
  
  function makeControl(resp){
      var stList = '<table id="res1" border="1" cellspacing="1" width="100%"><tbody>'; 
      for (var i=0; i<resp.items.length;i++){
          var vid = resp.items[i].id.videoId; 
          var tit = resp.items[i].snippet.title;
          if(typeof vid != 'undefined'){    
              stList += '<tr><td style="width:80px;vertical-align:top">'+
                '<a class="show" href="#" title="'+ vid + '" onclick="playVid(this);'+
                ' return false">'+
                '<img  width="80" height="60" src="http://img.youtube.com/vi/'+ 
                vid +'/default.jpg"></a></td>'+
                '<td><b>'+i+'</b>-'+ tit +'</td></tr>';
          }
      }
      document.getElementById('list1').innerHTML = stList + '</tbody></table>';
      //HTML: <div id="list1" 
      //style="width:853px;height:400px;overflow:auto;background-color:#EEEEEE">
      //</div>
  }
  
  function playVid(thi){
      var st = 'https://www.youtube.com/embed/'+thi.title+'?autoplay=1';
      document.getElementById('player').src = st; 
      //HTML: <iframe id="player" width="853" height="480" src="" frameborder="1" allowfullscreen>
      //</iframe>
  }

person hung phan    schedule 24.02.2016
comment
Пожалуйста, уточните, как этот код отвечает на вопрос. - person JAL; 24.02.2016