2014-11-17 4 views
1

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

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> 

ответ

3

Документация немного вводит в заблуждение (можно даже сказать, что неверно); HTML для «поиска по ключевому слову» загружает те же «auth.js», что два других примера на этой странице, но у него нет никаких элементов HTML, чтобы фактически инициировать процесс входа в систему (например, «кнопка входа» «если пользователь еще не авторизовался», как это делают другие два примера. Bascially, если вы используете, что при условии 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> 

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

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

1

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

<!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 is undefined? действительно помог мне понять это:

<!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> 

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

0

Благодарим вас за кодировку.Позвольте мне поделиться мой код:

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> 
 
    }

+0

Просьба представить информацию о том, как этот код отвечает на вопрос. – JAL

Смежные вопросы