2016-02-28 70 views
0

我正在尝试使用Youtube的api,并运行搜索查询来检索找到的视频。当我运行js或html时,没有任何内容正在打印。身份验证密钥是正确的。当我运行js文件时,它所说的是[Finished in 0.4s]。当我运行html文件时,什么都没有显示出来。为什么js和html代码没有运行搜索查询?

JS文件

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> 

+0

你从服务器加载页面。 .. localhost或其他?在控制台中引发任何错误? – charlietfl

+0

我在系统上运行,我觉得这是问题。我正在使用heroku作为我的服务器,我将如何在heroku上运行它? – stackerleet

+0

'on系统“是什么意思?从'file://'协议打开? – charlietfl

回答

0

默认情况下为视频链接的返回值是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>