2011-04-15 88 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