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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5194619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 16:06:34  来源:igfitidea点击:

Getting Youtube Video Information using javascript/jquery

javascriptjqueryyoutubeyoutube-api

提问by Ali

    <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, '' + ',' + '');
    return prefix + x1 + x2;
}
  </script>

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

之后,它将定义 List 放入一个 div 中,该 div 位于表中

<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

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

采纳答案by Tom

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.

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

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

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

Good luck, Tom

祝你好运,汤姆

回答by Danny

You should try the jTube jquery youtube library. It makes it pretty easy to do basic calls like this. Download / view code at: https://github.com/monkeecreate/jTube/blob/master/jTube/jquery.jTube.js

您应该尝试 jTube jquery youtube 库。它可以很容易地进行这样的基本调用。下载/查看代码:https: //github.com/monkeecreate/jTube/blob/master/jTube/jquery.jTube.js

Use like:

像这样使用:

$.jTube({
    request: 'user',
    requestValue: 'defvayne23',
    requestOption: 'uploads',
    success: function(videos){
        ...code here
    }
});

View more samples: https://github.com/defvayne23/jTube

查看更多示例:https: //github.com/defvayne23/jTube

回答by Tom

While I don't really know what the problem you're facing is, to answer your question about how to get information from a youtube video, I made a quick example I below.

虽然我真的不知道你面临的问题是什么,但为了回答你关于如何从 YouTube 视频中获取信息的问题,我在下面做了一个简单的例子。

Having the youtube video code get variable in php: $_GET['v'].

让 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" 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>
</body>
</html>

This prints title above embedded video (iframe), and description, views and author beneath.

这将在嵌入视频 (iframe) 上方打印标题,在下方打印描述、视图和作者。

I don't know what more you want to do (listinfo, numberformat), but I'd guess you can work it out from here.

我不知道你还想做什么(listinfo、numberformat),但我猜你可以从这里解决。

Hope this helps.

希望这可以帮助。

Tom

汤姆