使用 javascript/jquery 获取 Youtube 视频信息 [英] Getting Youtube Video Information using javascript/jquery

查看：21
本文介绍了使用 javascript/jquery 获取 Youtube 视频信息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这就是我从单个视频中获取信息的代码，在收到信息后，它会调用此函数来显示它:

之后它将定义列表放入一个div中，我在一个表中

<table width="485"><tr><td><div id="agenda"></div></td></tr>;/表>

所有这些信息都在正文中找到，我似乎无法让它发挥作用，我已经尝试了一周，但找不到任何方法使其发挥作用

解决方案

由于 youtube API 不允许单个请求返回超过 50 条评论，因此您需要添加一个名为start-index"的 URL 参数"，它告诉 youtube 您希望从那里获得评论.下面是一个例子.我已经做到了，只要响应 JSON 返回 50 条评论，它就会为接下来的 50 条评论再次调用该函数.

<头><script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script><script type="text/javascript">函数 getYouTubeInfo() {$.ajax({url: "http://gdata.youtube.com/feeds/api/videos/<?php echo $_GET['v']; ?>?v=2&alt=json",数据类型:jsonp"，成功:函数(数据){解析结果(数据)；}});}函数解析结果(数据){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>作者</b>:'+作者+'<br/><b>浏览次数</b>:'+浏览次数);getComments(data.entry.gd$comments.gd$feedLink.href + '&max-results=50&alt=json', 1);}函数 getComments(commentsURL, startIndex) {$.ajax({网址:commentsURL + '&start-index=' + startIndex，数据类型:jsonp"，成功:功能(数据){$.each(data.feed.entry, function(key, val) {$('#comments').append('<br/>作者:' + val.author[0].name.$t + ', 评论:' + val.content.$t);});if ($(data.feed.entry).size() == 50) { getComments(commentsURL, startIndex + 50);}}});}$(document).ready(function () {getYouTubeInfo();});<title>YouTube</title><body bgcolor="灰色"><div align="center"><br/><br/><div id="title" style="color: #dddddd">找不到标题</div><br/><iframe title="Youtube Video Player" width="640" height="390" 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;">找不到描述</div><div id="extrainfo" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">找不到额外信息</div><div id="comments" style="width:400px; background-color: #dddddd; font-size:10px; text-align:left;">找不到评论</div>

如果您有任何其他问题或遇到此代码，请不要犹豫再次提问:-)

祝你好运汤姆

    <script type= "text/javascript">
var url = "http://gdata.youtube.com/feeds/api/videos/VA770wpLX-Q?v=2&amp;alt=json-in-script&amp;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>

So thats my code to get information from a single video, after the info is received it calls this function to display it:

    <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+)(d{3})/;
    while (rgx.test(x1))
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    return prefix + x1 + x2;
}
  </script>

After that it puts the definition List into a div, which I have inside a table

<table width="485"><tr><td><div id="agenda"></div></td></tr></table>

all of this information is found in the body, I can't seem to get it to work, I've been trying for a week now, and I can't find any way to make it work

解决方案

Since the youtube API does not allow more than 50 comments to be returned on a single request, you'll need to add a URL parameter called "start-index", which tells youtube that you want to get comments from there onwards. Below is an example. I've made it so that as long as the response JSON returns 50 comments, it calls the function again for the next 50 comments.

<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" width="640" height="390" 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>

If you have any more questions or you get stuck with this code, don't hesitate to ask again :-)

Good luck, Tom

这篇关于使用 javascript/jquery 获取 Youtube 视频信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆