使用 Javascript 的 YouTube 数据 API v3 - IT屋-程序员软件开发技术分享社区
首页 前端开发 使用 Javascript 的 YouTube 数据 API v3
使用 Javascript 的 YouTube 数据 API v3
[英] YouTube Data API v3 Using Javascript
本文介绍了使用 Javascript 的 YouTube 数据 API v3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对编写代码和使用 API 有点陌生.我不完全确定为什么我的程序没有按照我希望的方式运行.
我想要做的是在控制台中提供搜索结果，然后才能继续下一步我希望它做什么；但是，我不认为正在搜索任何内容.
根据此:https://developers.google.com/youtube/v3/docs/search/list#http-request ，唯一需要的参数是part"，所以我认为 我做的一切都对吗?可能不是，因为据我所知，当我尝试搜索一个术语时，没有搜索到任何内容.这是我的代码:
HTML:
<html lang="zh-cn"><头><meta charset="UTF-8"><title>文档</title><身体><部分><form id="search-term"><p>输入名称:<br/><input id="query" type="text" name="姓名"/><br/><小时/><input type="button" value="在这里输入"/></p><div id="搜索结果"> </表单></节><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="js/script.js"></script>
</html>JavaScript:
$(document).ready(function(){$('#search-term').submit(function(event){event.preventDefault();var searchTerm = $('#query').val();getRequest(searchTerm);});函数 getRequest(searchTerm){变量参数 = {"q": "搜索词",部分":片段"，"type": '视频',"key": '我被建议将我的密钥保密，所以我编辑了这部分'}url = 'https://www.googleapis.com/youtube/v3/search';$.getJSON(url, params, function(data){显示结果(数据.项目)；})}功能显示结果(结果){var html = "";$.each(results, function(index,value){html += ''+ value.snippet.thumbnails.high.url + '</p>'+ '<p>'+ 'https://www.youtube.com/watch?v=' + value.id.videoId + '</p>'+ '<hr/>';console.log(value.snippet.thumbnails.high.url);控制台日志(值)；})$('#search-results').html(html);}})
解决方案
您可能需要 data.items 而不是 data.search
在他们的文档中列出的响应"部分下，我没有看到任何提及搜索"参数的内容.在此处查看响应属性:https://developers.google.com/youtube/v3/docs/search/list#response
因此，如果您使用 console.log(data); 而不是 data.search
，您可能会看到一些输出我建议您查看 Google 的 Javascript API 客户端库. 这可能不是您的最佳解决方案，但值得一试.在 GitHub 上下载
使用 gapi.client.youtube.search.list 的示例:
//API 加载后，调用函数开启搜索框.函数 handleAPILoaded() {$('#search-button').attr('disabled', false);}//搜索指定的字符串.功能搜索(){var q = $('#query').val();var request = gapi.client.youtube.search.list({q: q,部分:'片段'});请求.执行(功能(响应){var str = JSON.stringify(response.result);$('#search-container').html('<pre>' + str + '</pre>');});}
I am kind of new to writing code and using API's. I am not entirely sure why my program is not working the way I would like it to.
What I want this to do is provide the search results in the console before I can move onto what I would like it to do next; however, I don't think anything is being searched.
According to this: https://developers.google.com/youtube/v3/docs/search/list#http-request , the only required parameter is "part," so I think I did everything right? Probably not though, because from what I can tell, nothing is being searched when I try to search for a term.
Here is my code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<section>
<form id="search-term">
<p>Enter Name:<br/>
<input id="query" type="text" name="Name"/><br/>
<hr/>
<input type="button" value="Enter here"/>
</p>
<div id="search-results">
</div>
</form>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
JavaScript:
$(document).ready(function(){
$('#search-term').submit(function(event){
event.preventDefault();
var searchTerm = $('#query').val();
getRequest(searchTerm);
});
function getRequest(searchTerm){
var params = {
"q": "searchTerm",
"part": 'snippet',
"type": 'video',
"key": 'I was advised to keep my key private, so I edited this part out'
}
url = 'https://www.googleapis.com/youtube/v3/search';
$.getJSON(url, params, function(data){
showResults(data.items);
})
}
function showResults(results){
var html = "";
$.each(results, function(index,value){
html += '<p>' + value.snippet.thumbnails.high.url + '</p>' + '<p>' + 'https://www.youtube.com/watch?v=' + value.id.videoId + '</p>' + '<hr/>';
console.log(value.snippet.thumbnails.high.url);
console.log(value);
})
$('#search-results').html(html);
}
})
解决方案
You probably want data.items instead of data.search
I don't see any mention of a 'search' parameter under the "Response" section listed in their documentation. See the response properties here: https://developers.google.com/youtube/v3/docs/search/list#response
Therefore, you can probably see some output if you console.log(data); instead of data.search
I recommend you check out Google's Javascript API Client Library. It might not be the best solution for you, but it's worth a try. Download on GitHub
Example using gapi.client.youtube.search.list:
// 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>');
});
}
这篇关于使用 Javascript 的 YouTube 数据 API v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
