Javascript 如何使用Youtube API获取链接标题(而不仅仅是文本)?
我想在用户搜索视频时向他们显示“有链接的标题列表”,当他们单击链接时,应该在同一个div中播放 我学习了一些教程,并在一个单元中展示了“标题和视频” 像这样Javascript 如何使用Youtube API获取链接标题(而不仅仅是文本)?,javascript,jquery,youtube,Javascript,Jquery,Youtube,我想在用户搜索视频时向他们显示“有链接的标题列表”,当他们单击链接时,应该在同一个div中播放 我学习了一些教程,并在一个单元中展示了“标题和视频” 像这样 function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res} $(function() { $("fo
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
$(function() {
$("form").on("submit", function(e) {
e.preventDefault();
// prepare the request
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: $("#media_search").val(),
maxResults: 5,
videoDuration: "medium",
publishedAfter: "2000-01-01T00:00:00Z"
});
// execute the request
request.execute(function(response) {
var results = response.result;
$("#youtube_results").empty();
$("#youtube_results").html("");
$.get("item.html", function(data) {
$.each(results.items, function(index, item) {
$("#youtube_results").append(
tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId}]));
});
});
resetVideoHeight();
});
});
$(window).on("resize", resetVideoHeight);
});
function resetVideoHeight() {
$(".video").css("height", $("#youtube_results").width() * 9/16);
}
function init() {
gapi.client.setApiKey("My_key");
gapi.client.load("youtube", "v3", function() {
// yt api is ready
});
}
函数tplawesome(e,t){res=e;for(var n=0;n搜索结果实际上并不包含指向视频的URL(仅包含指向缩略图的URL)。但是,它会返回“videoId”字段。这是播放视频所需的魔术键。您只需将videoId与此链接即可构造URL“”
参见下面的输出示例(这只是结果列表中的一个条目)
etag=“\”jOXstHOM20qemPbHbyzf7ztZ7rI/sac7bhRUtt0cHYR4ntn0iH5E54U\”;
项目=(
{
etag=“\”jOXstHOM20qemPbHbyzf7ztZ7rI/o6DPa3ydgPLZK1l-83eAXJG97Xs\”;
id={
kind=“youtube#视频”;
videoId=JeQuelXsUYA;
};
kind=“youtube#searchResult”;
片段={
channelId=“UCjs0c_gIgDg7-3iroN7Qxfw”;
channelTitle=“”;
description=“…”;
liveBroadcastContent=无;
publishedAt=“2015-01-14T21:11:18.000Z”;
缩略图={
默认值={
url=”https://i.ytimg.com/vi/JeQuelXsUYA/default.jpg";
};
高={
url=”https://i.ytimg.com/vi/JeQuelXsUYA/hqdefault.jpg";
};
中等={
url=”https://i.ytimg.com/vi/JeQuelXsUYA/mqdefault.jpg";
};
};
title=“监视器颜色测试/监视器Farbtest(RGB/CMYK)(1080p)”;
};
},
谢谢你的回答!但是我把这些代码放在我的代码中的什么地方进行测试呢?
<form>
<div class="form-group">
<div class="input-group input-group-md" style="padding-top:37px;padding-bottom:10px;">
<span>
<i class="fa fa-language"></i>
</span>
<input type="text" class="form-control" placeholder="keywords" autocomplete="off" id="media_search">
<span class="input-group-btn">
<input type="submit" value="search" class="form-control btn btn-default">
</span>
</div>
</div>
</form>
<div class="panel panel-default">
<div class="panel-body" id="youtube_results">
</div>
</div>
etag = "\"jOXstHOM20qemPbHbyzf7ztZ7rI/sac7bhRUtt0cHYR4ntn0iH5E54U\"";
items = (
{
etag = "\"jOXstHOM20qemPbHbyzf7ztZ7rI/o6DPa3ydgPLZK1l-83eAXJG97Xs\"";
id = {
kind = "youtube#video";
videoId = JeQuelXsUYA;
};
kind = "youtube#searchResult";
snippet = {
channelId = "UCjs0c_gIgDg7-3iroN7Qxfw";
channelTitle = "";
description = “<long description> ...";
liveBroadcastContent = none;
publishedAt = "2015-01-14T21:11:18.000Z";
thumbnails = {
default = {
url = "https://i.ytimg.com/vi/JeQuelXsUYA/default.jpg";
};
high = {
url = "https://i.ytimg.com/vi/JeQuelXsUYA/hqdefault.jpg";
};
medium = {
url = "https://i.ytimg.com/vi/JeQuelXsUYA/mqdefault.jpg";
};
};
title = "Monitor Color Test / Monitor-Farbtest (RGB/CMYK) (1080p)";
};
},