youtube feed display_问答_开发者_运维开发者技术经验分享

I have a js code which is displaying Youtube videos. The problem is that it doesn't show any related data(for example the title of the video)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>My Videos</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<script type="text/javascript">
function loadVideo(playerUrl, autoplay) {
    swfobject.embedSWF(
        playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
        (autoplay?1:0)+'&version=3', 'player', '585', '355', '9.0.0', false, 
        false, {allowfullscreen: 'true'});
        /*Parse the facebook like button*/
        $('#like').html('<fb:like href="'+playerUrl+'" layout="button_count" show_faces="false" width="65" action="like" font="segoe ui" colorscheme="light" />')
        if (typeof FB  != "undefined"){
            FB.XFBML.parse(document.getElementById('like'))
        }
}
function showMyVideos(data) {
    var feed = data.feed;
    var entries = feed.entry || [];
    var html = ['<ul class="videos">'];
    for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var title = entry.title.$t.substr(0, 20);
        var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
        var playerUrl = entries[i].media$group.media$content[0].url;
        var videoId = playerUrl.substr(playerUrl.indexOf('v/')+2, 11);          
        playerUrl = "http://www.youtube.com/v/" + videoId;  
        html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
                  '<img src="', 
                  thumbnailUrl, '" width="94" height="58"/>', '</span></li>');
    }
    html.push('</ul>');
    document.getElementById('videos').innerHTML = html.join('');
    if (entries.length > 0) {
        loadVideo(entries[0].media$group.media$content[0].url, false);
    }
}
$(function(){
      $.ajax({
            type: "GET",
            url: "http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?time=today&alt=json-in-script&max-results=5&format=5",
            cache: false,
            dataType:'jsonp',
            success: function(data){
                showMyVideos(data);
          },
            error: function(XMLHttpRequest, textStatus, errorThrown, data){
                alert("Not able to fetch the data due to feed unavailability!!!");
            }
        });
})
</script>



<style>
body{
    background:#fff;
    color:#c0c0c0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:100%; 
    line-height:1.125em;
    }
#videoContainer {
    font-size:.75em;
    overflow:hidden;
    position:absolute;
      left:0px;
      top:0px;
      margin-left:40px;
      margin-top:5px;
    }
#like {
    height: 15px;
    margin-top: 0px;
    text-align: right;
    }
object {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}
ul.videos {
    list-style: none;
    margin-bottom: 1em;
    margin-left: 0em;
    padding-left : 0em;
margin-top:5px;
    }
    ul.videos li {
        cursor: pointer;
        display: inline;
        margin-bottom: 1em;
        padding-right: 28px;
    }
img {
 -moz-box-shadow: 0px 0px 0px #ccc;
  -webkit-box-shadow: 0px 0px 0px#ccc;
  box-shadow: 0px 0px 0px #ccc;
}
img:hover {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

</style>

</head>
<body>

<div id="videoContainer">
    <div id="playerContainer">
        <div id="player">
        </div>
        <div id="like">
        </div>
        <div id="videos">
        </div>
    </div>
</div>

</bod开发者_如何学Pythony>
</html>

You forgot to load the title variable in the html.push

 html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
              title,
              '<img src="', 
              thumbnailUrl, '" width="94" height="58"/>', '</span></li>');

Hope it helps