youtube api v3 按关键字搜索 javascript-前端问题

youtube api v3 search by keyword javascript(youtube api v3 按关键字搜索 javascript)

本文介绍了youtube api v3 按关键字搜索 javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

谷歌开发者页面上给出的按关键字搜索"的 javascript 示例对我不起作用.https://developers.google.com/youtube/v3/code_samples/javascript当我运行代码时，我得到一个禁用的搜索框，里面有猫".此外，该示例没有说明如何写入 API 密钥而不是客户端 ID.它说这是可能的，但没有给出具体的例子来说明如何做到这一点.有人可以指出这段代码哪里出错了.两个.js文件和html的代码如下:

The javascript example for "search by keyword" that is given at the google developers page isn't working for me. https://developers.google.com/youtube/v3/code_samples/javascript When I run the code, I get a disabled search box with "cats" inside. Also, the example doesn't explain how to write in the API key as opposed to the Client ID. It says it's possible, but gives no concrete example of how to do it. Can someone point out where this code is going wrong. The code for the two .js files and the html is as follows:

auth.js 文件:

auth.js file:

// 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 文件:

search.js file:

// 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>');
 });
}

搜索.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>

推荐答案

文档有点误导(甚至可能说不正确)；按关键字搜索"的 HTML 正在加载与该页面上的其他两个示例相同的auth.js"，但它没有任何 HTML 元素来实际触发登录过程(即登录按钮" 如果用户尚未获得授权)，就像其他两个示例一样.基本上，如果您使用的是提供的 auth.js，则需要在 HTML 中包含如下所示的部分:

The documentation is misleading a bit (one might even say incorrect); the HTML for the "search by keyword" is loading the same "auth.js" that the other two examples on that page are, but it doesn't then have any HTML elements to actually trigger the login process (i.e. a "login button" if a user isn't already authorized) like the other two examples do. Bascially, if you're using that provided auth.js, you need to have, in your HTML, a section that looks like this:

<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 上添加post-auth"类.然后，该演示将在用户访问时仅显示登录链接；单击时，当用户允许授权时，登录链接将被隐藏，您的搜索区域将显示(并启用按钮).这就是演示的设置方式.

Then, you can also add the class of "post-auth" on a new div that wraps around your existing buttons and search container. The demo will then, when a user visits, only present the login link; when clicked on, and when a user allows the authorization, then the login link will be hidden and your search area will be shown (and the button enabled). That's just how the demo is set up.

当然，按关键字搜索不需要 oAuth2，因此(回答您的第二个问题)您可能会发现更容易 A)删除 handleApiLoaded 方法(因此您的按钮永远不会被禁用), 和 B) 手动调用 gapi.client.load() (即不是由 oAuth 成功触发).然后，调用 gapi.client.setApiKey({YOUR KEY}) 以便您的所有请求都将您的密钥包含在其标头中.

Of course, search by keyword does NOT require oAuth2, and so (to answer your 2nd question) you might find it easier to A) remove the handleApiLoaded method (so your button is never disabled), and B) call gapi.client.load() manually (i.e. not triggered by an oAuth success). Then, call gapi.client.setApiKey({YOUR KEY}) so that all of your requests will include your key in their header.

这篇关于youtube api v3 按关键字搜索 javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！