Getting Youtube Video Information using javascript/jquery

javascript jquery youtube youtube-api

40,589

Solution 1

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

Solution 2

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

Use like:

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

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

40,589

Author by

Ali

Updated on July 19, 2022

Comments

Ali almost 2 years

    <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

Ali about 13 years

@Tom thanks a lot! thats works amazingly, I tried to work it around to make it get the comments for a video instead, but couldn't manage it, I assume you would have to make it loop through each comment and place it on the page separately? if you have any Idea on how to accomplish something like that please let me know!! I would have used jTube like Danny suggested, but for this specific function it only allows me to get 50 results/page, and I want to be able to just loop through each comment, making the comments visible isn't neccesary, I just need to be able to get the comments
mdskinner over 12 years

you can't specify an id with this tho can you?
Danny over 12 years

i think it can, for request do video, and then value would be the id. not 100% sure tho
Jefree Sujit over 8 years

@Tom, could you explain me how the above code works?
Janyk over 8 years

Note that the GData API that is being used here is deprecated, and does not work anymore. You should use the Data v3 API from now on, which you can find here: developers.google.com/youtube/v3