2011-04-15 62 views
-2
<!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>', title, '</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_viewed_Autos?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:silver; 
font-family:Arial, Helvetica, sans-serif; 
font-size:100%; 
line-height:1.125em; 
} 

#videoContainer { 
font-size:.75em; 
overflow:hidden; 
position:absolute; 
left:0; 
top:0; 
margin-left:40px; 
margin-top:5px; 
} 

#like { 
height:15px; 
margin-top:10px; 
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:0; 
padding-left:0; 
} 

ul.videos li { 
cursor:pointer; 
display:inline; 
margin-bottom:1em; 
padding-right:28px; 
color:blue; 
} 
</style> 

</head> 
<body> 

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

</body> 
</html> 

有人可以告诉我如何定位小缩略图的标题。列表项定位

感谢的

+0

把他们放在哪里? – rrrr 2011-04-15 08:57:00

+0

没关系。看来我无法用填充和边距来移动它们。我只想对他们有CSS访问权限。我甚至不知道他们是什么... – user667193 2011-04-15 09:08:00

回答

0

好像你在你的输出中有一个闭合跨度标记,但没有起始跨度标记。

+0

嗨@msjolund这似乎工作(谢谢),但现在第一个缩略图不合作。你能否告诉我是否有关于第一个缩略图标题的特别之处。 – user667193 2011-04-15 09:53:36

+0

没关系,这是CSS。 (为什么地狱人们投票呢?) – user667193 2011-04-15 10:42:54