使用 javascript/jquery 获取 Youtube 视频信息
Posted
技术标签:
【中文标题】使用 javascript/jquery 获取 Youtube 视频信息【英文标题】：Getting Youtube Video Information using javascript/jquery 【发布时间】：2011-07-08 20:29:25 【问题描述】： <script type= "text/javascript">
var url = "http://gdata.youtube.com/feeds/api/videos/VA770wpLX-Q?v=2&alt=json-in-script&callback=";
var title;
var description;
var viewcount;
var views;
var author;
$.getJSON(url,
function(data)
title = data.entry.title.$t;
description = data.entry.media$group.media$description.$t;
viewcount = data.entry.yt$statistics.viewCount;
views = numberFormat (viewcount);
author = data.entry.author[0].name.$t;
listInfo (title,description,author,views);
);
</script>
这就是我从单个视频中获取信息的代码，在收到信息后，它会调用此函数来显示它：
<script type="text/javascript">
function listInfo (title,description,author,views)
var html = ['<dl>'];
html.push('<dt>','<span class="titleStyle">', title,'</span><span class="descriptionStyle">',description, '</span><span class="authorStyle">',author,'</span><span class="viewsStyle">',' Views:',views,'</span></dt>');
html.push('</dl>');
document.getElementById("agenda").innerHTML = html.join("");
function numberFormat(nStr,prefix)
var prefix = prefix || '';
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d3)/;
while (rgx.test(x1))
x1 = x1.replace(rgx, '$1' + ',' + '$2');
return prefix + x1 + x2;
</script>
之后它将定义列表放入一个 div 中，我在一个表中
<table ><tr><td><div id="agenda"></div></td></tr></table>
所有这些信息都在体内找到，我似乎无法让它发挥作用，我已经尝试了一个星期，但我找不到任何方法让它发挥作用
【问题讨论】：
什么有效，什么失败？你有任何数据回来吗？是否有任何 HTML 被渲染？ 在某一时刻，我让它渲染了一切，但它只在dreamweaver中显示，我从堆栈溢出中获得了原始源，但一直寻找并且无法再次找到它，所以我开始尝试自己做，在这一点上，我什至认为这根本不对，我的意思是我的代码 【参考方案1】：由于 youtube API 不允许在单个请求中返回超过 50 个 cmets，因此您需要添加一个名为“start-index”的 URL 参数，它告诉 youtube 您希望从那里获取 cmets .下面是一个例子。我已经做到了，只要响应 JSON 返回 50 cmets，它就会为接下来的 50 cmets 再次调用该函数。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type= "text/javascript">
function getYouTubeInfo()
$.ajax(
url: "http://gdata.youtube.com/feeds/api/videos/<?php echo $_GET['v']; ?>?v=2&alt=json",
dataType: "jsonp",
success: function (data) parseresults(data);
);
function parseresults(data)
var title = data.entry.title.$t;
var description = data.entry.media$group.media$description.$t;
var viewcount = data.entry.yt$statistics.viewCount;
var author = data.entry.author[0].name.$t;
$('#title').html(title);
$('#description').html('<b>Description</b>: ' + description);
$('#extrainfo').html('<b>Author</b>: ' + author + '<br/><b>Views</b>: ' + viewcount);
getComments(data.entry.gd$comments.gd$feedLink.href + '&max-results=50&alt=json', 1);
function getComments(commentsURL, startIndex)
$.ajax(
url: commentsURL + '&start-index=' + startIndex,
dataType: "jsonp",
success: function (data)
$.each(data.feed.entry, function(key, val)
$('#comments').append('<br/>Author: ' + val.author[0].name.$t + ', Comment: ' + val.content.$t);
);
if ($(data.feed.entry).size() == 50) getComments(commentsURL, startIndex + 50);
);
$(document).ready(function ()
getYouTubeInfo();
);
</script>
<title>YouTube</title>
</head>
<body bgcolor="grey">
<div align="center">
<br/><br/>
<div id="title" style="color: #dddddd">Could not find a title</div><br/>
<iframe title="Youtube Video Player" src="http://www.youtube.com/embed/<?php echo $_GET['v']; ?>?fs=1&autoplay=1&loop=0" frameborder="0" allowfullscreen style="border: 1px solid black"></iframe>
<br/><br/>
<div id="description" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find a description</div>
<div id="extrainfo" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find extra information</div>
<div id="comments" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find comments</div>
</div>
</body>
</html>
如果您还有其他问题或遇到此代码，请不要犹豫再次提问 :-)
祝你好运， 汤姆
【讨论】：
@Tom，你能解释一下上面的代码是如何工作的吗？ 请注意，此处使用的 GData API 已被弃用，不再起作用。从现在开始，您应该使用 Data v3 API，您可以在这里找到它：developers.google.com/youtube/v3【参考方案2】：你应该试试 jTube jquery youtube 库。它使进行这样的基本调用变得非常容易。下载/查看代码：https://github.com/monkeecreate/jTube/blob/master/jTube/jquery.jTube.js
像这样使用：
$.jTube(
request: 'user',
requestValue: 'defvayne23',
requestOption: 'uploads',
success: function(videos)
...code here
);
查看更多示例：https://github.com/defvayne23/jTube
【讨论】：
你不能用这个指定一个ID吗？ 我认为可以，对于请求做视频，然后 value 将是 id。不是 100% 确定【参考方案3】：虽然我真的不知道您面临的问题是什么，但为了回答您有关如何从 youtube 视频中获取信息的问题，我在下面做了一个简单的示例。
让 youtube 视频代码在 php 中获取变量：$_GET['v']。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type= "text/javascript">
function getYouTubeInfo()
$.ajax(
url: "http://gdata.youtube.com/feeds/api/videos/<?php echo $_GET['v']; ?>?v=2&alt=json",
dataType: "jsonp",
success: function (data) parseresults(data)
);
function parseresults(data)
var title = data.entry.title.$t;
var description = data.entry.media$group.media$description.$t;
var viewcount = data.entry.yt$statistics.viewCount;
var author = data.entry.author[0].name.$t;
$('#title').html(title);
$('#description').html('<b>Description</b>: ' + description);
$('#extrainfo').html('<b>Author</b>: ' + author + '<br/><b>Views</b>: ' + viewcount);
$(document).ready(function ()
getYouTubeInfo();
);
</script>
<title>YouTube</title>
</head>
<body bgcolor="grey">
<div align="center">
<br/><br/>
<div id="title" style="color: #dddddd">Could not find a title</div><br/>
<iframe title="Youtube Video Player" src="http://www.youtube.com/embed/<?php echo $_GET['v']; ?>?fs=1&autoplay=1&loop=0" frameborder="0" allowfullscreen style="border: 1px solid black"></iframe>
<br/><br/>
<div id="description" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find a description</div>
<div id="extrainfo" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">Could not find extra information</div>
</div>
</body>
</html>
这会在嵌入视频 (iframe) 上方打印标题，在下方打印描述、视图和作者。
我不知道你还想做什么（listinfo、numberformat），但我想你可以从这里解决。
希望这会有所帮助。
汤姆
【讨论】：
@Tom 非常感谢！那效果惊人，我试图解决它以使其获取视频的 cmets，但无法管理它，我假设您必须使其循环遍历每个评论并将其单独放置在页面上？如果您对如何完成类似的事情有任何想法，请告诉我！我会像 Danny 建议的那样使用 jTube，但是对于这个特定的功能，它只允许我获得 50 个结果/页，我希望能够循环浏览每个评论，不需要让 cmets 可见，我只需要能够获得 cmets以上是关于使用 javascript/jquery 获取 Youtube 视频信息的主要内容，如果未能解决你的问题，请参考以下文章
使用 javascript/jquery 获取 Youtube 视频信息
如何使用 javascript / jQuery 获取数据 ajax api 数组？
通过获取 .attr 使用 JavaScript/jquery 播放/暂停音频文件
使用 javascript / jQuery 获取 data-* 属性列表