javascript - 使用 javascript/jquery 获取 Youtube 视频信息

标签 javascript jquery youtube youtube-api

    <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>

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

    <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>

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

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

所有这些信息都在 body 中找到,我似乎无法让它发挥作用,我已经尝试了一个星期了,但我找不到任何方法让它发挥作用

最佳答案

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

<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>

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

祝你好运, 汤姆

关于javascript - 使用 javascript/jquery 获取 Youtube 视频信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5194619/

相关文章:

javascript - 缓存对象项的完整路径然后使用它进行分配不起作用

javascript - 如何使用javascript显示在 body 中心对齐的多个图像

JavaScript for 循环错误

youtube - 尝试通过tampermonkey将www.youtube.com重定向到www.nsfwyoutube.com

angular - 如何使工作的JS项目在Angular中工作?

android - 如何在Android应用程序中播放youtube嵌入式代码?

javascript - JS Filter 函数用于删除对象中两个 ID 之间的数组中的项目

javascript - onclick加载js数据?

javascript - 从GEvent获取 "i"的值

jquery - 使用通过 Browserify 导入的 jQuery 插件