使用 youtube api 使用 jQuery 获取 youtube 视频的标题
Posted
技术标签:
【中文标题】使用 youtube api 使用 jQuery 获取 youtube 视频的标题【英文标题】:Get youtube video's title with jQuery using youtube api 【发布时间】:2011-01-29 12:30:02 【问题描述】:从youtybe视频中获取标题的最简单方法是什么,例如这个视频标题:
http://www.youtube.com/watch?v=Wp7B81Kx66o
谢谢!
【问题讨论】:
看看这个:How to get thumbnail of YouTube video link using YouTube API。它表示缩略图,但几乎可以获取有关视频的任何公开可用信息。 【参考方案1】:试试这个:
<script type="text/javascript">
function showMyVideos(data)
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul>'];
for (var i = 0; i < entries.length; i++)
var entry = entries[i];
var title = entry.title.$t;
html.push('<li>', title, '</li>');
html.push('</ul>');
document.getElementById('videos').innerHTML = html.join('');
</script>
这在你的身体部位:
<body>
<div id="videos">
<script
type="text/javascript"
src="http://gdata.youtube.com/feeds/users/GoogleDevelopers/uploads?alt=json-in-script&format=5&callback=showMyVideos">
</script>
</div>
</body>
【讨论】:
【参考方案2】:使用jQuery's JSON 调用 YouTube API 来获取结果,然后使用 jQuery 将结果放在您想要的位置。您可以使用 firebug 的 NET 选项卡来确保您的请求/响应正确返回,然后使用 console.log() 来确保您正确解析了响应。
例如。网址:
获取https://gdata.youtube.com/feeds/api/videos/(the-video-id)?v=2&alt=json
更多信息:
YouTube API for a specific video
Developer's Guide: JSON / JavaScript
【讨论】:
这是已弃用的 YouTube v2 API,@AlexC 如果您认为正确,请更新到下面的答案【参考方案3】:尝试在 Jquery 列表视图前显示 Youtube 专题图片。
<script>
function showMyVideos(data)
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul data-role="listview">'];
for (var i = 0; i < entries.length; i++)
var entry = entries[i];
var title = entry.title.$t;
var feature = entry.content.$t.substring(entry.content.$t.indexOf("src=")+5);
feature = feature.substring(0,feature.indexOf('"'));
html.push('<li><img src="' ,feature , '" />' , title , '<p>' , feature, '</p></li>');
html.push('</ul>');
document.getElementById('videos').innerHTML = html.join('');
</script>
<div id="videos">
<script
src="http://gdata.youtube.com/feeds/users/mostviewcomedy/uploads?alt=json-in-script&format=5&callback=showMyVideos">
</script>
</div>
【讨论】:
这很糟糕,因为您仍在获取所有数据,您只想获取正确的数据,就像通过请求参数而不是客户端进行所有过滤一样【参考方案4】:这是@easement 使用当前v3 YouTube Data API 提供的原始答案的大修实现。
要向 API 发出请求,您可以使用 jQuery's getJSON() call 通过 AJAX 从 YouTube 请求标题。 YouTube 的 v3 Data API 提供了 3 个可用于获取标题的端点:
-
Snippet Title - 视频的标题。属性值的最大长度为 100 个字符,并且可以包含除 之外的所有有效 UTF-8 字符。
Snippet Localized Title - 本地化的视频标题,同样具有上述最大长度
Full Localized Title - 完整的本地化视频标题。
使用片段标题的示例实现
var yt_api_key = your YouTube api key,
yt_video_id = your YouTube video id,
yt_snippet_endpoint = "https://www.googleapis.com/youtube/v3/videos?part=snippet&id=" + yt_video_id + "&key=" + yt_api_key;
var jqxhr = $.getJSON(yt_snippet_endpoint)
.done(function(data)
console.log("second success callback");
var title = getTitle(data);
// do something with title here
)
.fail(function()
console.log("error, see network tab for response details");
);
function getTitle(snippet_json_data)
var title = snippet_json_data.title;
return title;
调试提示:您可以使用开发者工具查看网络请求(即Chrome's developer tools 或Firefox's Firebug)以确保您的请求/响应正确返回,然后使用console.log( ) 来记录返回的数据,以确保您正确解析了响应。
补充阅读: YouTube Data API "getting started"
【讨论】:
以上是关于使用 youtube api 使用 jQuery 获取 youtube 视频的标题的主要内容,如果未能解决你的问题,请参考以下文章
使用 javascript/jquery 获取 Youtube 视频信息
React Native(Expo)文件对象与 Javascript(jQuery)文件对象 - Blob/文件大小不同(YouTube 数据 API)
在单个页面上嵌入多个 YouTube 播放列表供稿? jQuery/YouTube API v3