Getting Youtube Video Information using javascript/jquery_问答_开发者

    <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

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

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.

Having the youtube video code get variable in 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.

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

Hope this helps.

Tom