Question

我正在尝试使用Youtube的api，并运行搜索查询来检索找到的视频。当我运行js或html时，什么都没有打印。验证密钥是正确的。当我运行js文件时，它只是[Finished in 0.4s]。当我运行html文件时，没有任何显示。

js file

function showResponse(response) {
var responseString = JSON.stringify(response, '', 2);
document.getElementById('response').innerHTML += responseString;
}

function onClientLoad() {
gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
 }


function onYouTubeApiLoad() {

gapi.client.setApiKey('hidden');

search();
 }

function search() {

var request = gapi.client.youtube.search.list({
    part: 'snippet',
    q: 'dog'
});


request.execute(onSearchResponse);
 }

function onSearchResponse(response) {
showResponse(response);
 }

搜索HTML代码

<!DOCTYPE html>
<html>
<head>
    <script src="search.js" type="text/javascript"></script>
    <script src="https://apis.google.com/js/client.js?onload=onClientLoad"     type="text/javascript"></script>
    </head>
<body>
    <pre id="response"></pre>
</body>

Answer 1

默认情况下，视频链接的返回值是json响应格式中的视频ID。

"id": {
  "kind": "youtube#video",
  "videoId": "dgVKzvO5zNc"
}

你可以过滤json响应并像链接一样创建一个解决方案，这是一个例子：

request.execute(function(response) {

    var items = response.result.items;
    for(i in items){
        var vidID = items[i].id.videoId;
        var link = '<a href="http://youtube.com/watch?v='+vidID+'">' + "link"+[i] + '</a><br>';
        document.getElementById('search-container').innerHTML += link;
    }
  });

html文件

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

为什么js和html代码没有运行搜索查询？

1 个答案: