1 fullpage=true 2 page.title=Google I/O 13 3 @jd:body 4 5 <style> 6 #ioplayer-frame { 7 z-index:10; 8 width:703px; 9 height:396px; 10 margin:0; 11 position:relative; 12 } 13 14 #noplayer-message { 15 position:absolute; 16 top:50%;left:0; 17 width:100%; 18 z-index:-1; 19 text-align:center; 20 display:none; 21 } 22 23 h1 { 24 font-weight:100; 25 font-size:40px; 26 line-height:30px; 27 margin:30px 0 10px 0px; 28 color:#000; 29 } 30 31 h2 { 32 font-weight:100; 33 font-size:30px; 34 line-height:30px; 35 margin:12px 0 10px 0px; 36 color:#000; 37 float:left; 38 display:block; 39 } 40 41 .col-4 h2 { 42 margin-top:40px; 43 } 44 45 ul.videos { 46 list-style:none; 47 margin:0; 48 width:auto; 49 } 50 ul.videos li { 51 display:block; 52 float:left; 53 position:relative; 54 margin:0 2px 2px 0; 55 background-repeat:no-repeat !important; 56 background-size:320px auto; 57 background-position:10% 50%; 58 z-index:1; /* IE: the description is 2 */ 59 } 60 ul.videos li a { 61 color:#fff !important; 62 display:block; 63 margin:0; 64 padding:8px 12px; 65 width:209px; 66 height:134px; 67 box-shadow:inset 500px 500px 999px rgba(000, 000, 000, 0.2); 68 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.8)), color-stop(1, transparent)); 69 background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8), transparent); 70 background-image: -moz-linear-gradient(top, rgba(0,0,0,0.8), transparent); 71 background-image: -o-linear-gradient(top, rgba(0,0,0,0.8), transparent); 72 background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); 73 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */ 74 } 75 ul.videos.featured li { 76 margin:0 0 2px; 77 } 78 ul.videos.featured li a { 79 margin:0; 80 height:115px; 81 } 82 ul.videos li a:hover { 83 box-shadow:inset 500px 500px 999px rgba(255,255,255, 0.6); 84 } 85 ul.videos li h4 { 86 text-shadow:1px 1px 0 rgba(0,0,0,0.8); 87 font-size:18px; 88 line-height:22px; 89 color:#fff; 90 margin:0; 91 height:100%; /* IE: to fill clickable area */ 92 } 93 94 ul.videos li .description-frame { 95 display:none; 96 z-index:2; /* IE: the li is 1 */ 97 } 98 ul.videos li a:hover .description-frame { 99 display:block; 100 position:absolute; 101 top:80px; 102 left:8px; 103 z-index:99; 104 } 105 ul.videos .description { 106 background:#fff; 107 width:200px; 108 padding:8px; 109 -webkit-border-radius:1px; 110 -moz-border-radius:1px; 111 border-radius:1px; 112 -moz-box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4); 113 -webkit-box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4); 114 box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4); 115 font-size:11px; 116 line-height:12px; 117 color:#000; 118 overflow:hidden; 119 } 120 ul.videos .arrow-up { 121 position:absolute; 122 left:15px; 123 top:-11px; 124 width:0; 125 height:0; 126 border-bottom:12px solid #fff; 127 border-left:12px solid transparent; 128 border-right:12px solid transparent; 129 } 130 ul.videos .arrow-down { 131 position:absolute; 132 left:15px; 133 bottom:-11px; 134 width:0; 135 height:0; 136 border-top:12px solid #fff; 137 border-left:12px solid transparent; 138 border-right:12px solid transparent; 139 } 140 141 ul.videos span.tag { 142 font-size:.9em; 143 font-weight:normal; 144 display: block; 145 position: absolute; 146 bottom: 0; 147 color: #fff; 148 left: 0; 149 padding: 4px; 150 border-top-right-radius:4px; 151 text-transform:uppercase; 152 text-shadow: none; 153 } 154 ul.videos span.tag.design { 155 background-color:rgba(51, 181, 229, .7); 156 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc33b5e5', endColorstr='#cc33b5e5',GradientType=0 ); /* IE6-9 */ 157 } 158 ul.videos span.tag.develop { 159 background-color:rgba(255, 136, 0, .7); 160 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccff8800', endColorstr='#ccff8800',GradientType=0 ); /* IE6-9 */ 161 } 162 ul.videos span.tag.distribute { 163 background-color:rgba(153, 204, 0, .7); 164 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc99cc00', endColorstr='#cc99cc00',GradientType=0 ); /* IE6-9 */ 165 } 166 167 </style> 168 169 170 171 172 173 174 175 <div class="wrap"> 176 177 <div class="col-12" style="width:704px;margin:0"> 178 <h1>Android @ Google I/O 13</h1> 179 <div id="ioplayer-frame"> 180 <div id="noplayer-message"> 181 <!-- busted flash player message --> 182 Your video is supposed to appear here.<br/> 183 Make sure you have the <a href="//get.adobe.com/flashplayer/" target="_blank">Flash® Player</a>. 184 </div> 185 <div id="player"><!-- Youtube embeds here... actually replaces this div --></div> 186 </div> 187 </div> 188 189 <div class="col-4" style="margin:0;width:234px;padding:0 0 0 2px"> 190 <h2 class="norule">Most Popular</h2> 191 <ul class="videos featured" id="playlist2"> 192 </ul> 193 </div> 194 </div> 195 196 <div class="wrap"> 197 198 <div style="position:absolute;width:940px;text-align:right"> 199 <a href="//www.youtube.com/AndroidDevelopers" target="_blank"> 200 More on YouTube 201 <img src="//www.youtube.com/favicon.ico" style="border:0;width:16px;height:16px;vertical-align:middle;margin:0 2px 3px 2px"> 202 </a> 203 </div> 204 <div style="width:944px;overflow:hidden;padding:0 0 20px"> 205 <h2 class="norule">All Videos</h2> 206 <ul class="videos" id="playlist1" style="clear:left"> 207 <span id="videos-design"></span> 208 <span id="videos-develop"></span> 209 <span id="videos-distribute"></span> 210 </ul> 211 </div> 212 213 </div> 214 215 <br class="clearfix"/> 216 217 218 219 220 221 222 223 224 225 226 227 <script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script> 228 <script type="text/javascript"> 229 230 /* Load a video into the player box. 231 * @param id The YouTube video ID 232 * @param title The video title to display in the player box (character escaped) 233 * @param autoplay Whether to automatically play the video 234 */ 235 function loadVideo(id, title, autoplay) { 236 var url = '//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1' + (autoplay?'&autoplay=1':''); 237 swfobject.embedSWF(url, 'player', '704', '397', '9.0.0', false, false, {allowfullscreen: 'true'}); 238 $('body,html').animate({ scrollTop: 0 }, "slow"); 239 setTimeout(function(){$('#noplayer-message').show()}, 2000); 240 } 241 242 243 function buildPlaylistDesign(data) { 244 buildPlaylist(data, $('ul#playlist1 #videos-design'), "design"); 245 } 246 247 function buildPlaylistDevelop(data) { 248 buildPlaylist(data, $('ul#playlist1 #videos-develop'), "develop"); 249 } 250 251 function buildPlaylistDistribute(data) { 252 buildPlaylist(data, $('ul#playlist1 #videos-distribute'), "distribute"); 253 } 254 255 function buildPlaylist2(data) { 256 buildPlaylist(data, $('ul#playlist2')); 257 } 258 259 function buildPlaylist(data, ul, tag) { 260 261 var MAX_DESC_LENGTH = 200; // the length at which we will trim the description 262 var feed = data.feed; 263 var entries = feed.entry || []; 264 var playlistId = feed.yt$playlistId.$t; 265 266 // Loop through each entry (each video) and add it to the '#DevelopersLive' list 267 for (var i = 0; i < entries.length; i++) { 268 var entry = entries[i]; 269 var title = entry.title.$t; 270 var id = entry.media$group.yt$videoid.$t; 271 // get 180x320 thumbnail 272 var thumbs = entry.media$group.media$thumbnail; 273 var thumbUrl; 274 for (var j = 0; j < thumbs.length; j++) { 275 if (thumbs[j].yt$name == "hqdefault") { 276 thumbUrl = thumbs[j].url; 277 } 278 } 279 280 // chop out the google io title 281 title = title.substr(title.indexOf("-") + 1, title.length); 282 283 var fullDescription = entry.media$group.media$description.$t; 284 var playerUrl = entry.media$group.media$content[0].url; 285 var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH); 286 // further shorten description if there's a url (remove it) 287 var httpindex = shortDescription.indexOf("http://"); 288 if (httpindex != -1) { 289 shortDescription = shortDescription.substring(0,httpindex); 290 } 291 shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 292 293 var a = $('<a href="#" id="' + id + '" ' 294 + 'onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); 295 var pShortDescription = $('<div class="description-frame"><div class="arrow-up"></div>' 296 + '<div class="description">' + shortDescription + '</div></div>'); 297 var h4Title = "<h4>" + title + "</h4>"; 298 var li = $('<li style="background-image:url(\'' + thumbUrl +'\')" />'); 299 300 li.append(a); 301 a.append(h4Title).append(pShortDescription); 302 303 if (tag !== undefined) { 304 var $tag = $('<span class="tag ' + tag + '">' + tag + '</span>'); 305 a.append($tag); 306 } 307 308 ul.append(li); 309 310 311 // put the first video in the player 312 if ((tag == "design") && (i == 0)) { 313 loadVideo(id, escape(title), false); 314 } 315 } 316 } 317 318 319 /* Request the playlist feeds from YouTube */ 320 function showDevelopersLivePlaylist() { 321 var playlistId = "PLWz5rJ2EKKc-qVhMuAprIFYFbCotdgJKq"; /* IO 13 - Design */ 322 $.getScript("//gdata.youtube.com/feeds/api/playlists/" 323 + playlistId + 324 "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDesign&orderby=position"); 325 326 playlistId = "PLWz5rJ2EKKc9rkwO9yBosRvkQBJd5utmR"; /* IO 13 - Develop */ 327 $.getScript("//gdata.youtube.com/feeds/api/playlists/" 328 + playlistId + 329 "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDevelop&orderby=position"); 330 331 playlistId = "PLWz5rJ2EKKc-1WjgQqL0B4OQtbLfhMlB2"; /* IO 13 - Distribute */ 332 $.getScript("//gdata.youtube.com/feeds/api/playlists/" 333 + playlistId + 334 "?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDistribute&orderby=position"); 335 336 337 playlistId = "PLWz5rJ2EKKc9WGUwq2gQ-coU3fSyexgOx"; /* IO 13 - The Android Sessions */ 338 $.getScript("//gdata.youtube.com/feeds/api/playlists/" 339 + playlistId + 340 "?v=2&alt=json-in-script&max-results=3&callback=buildPlaylist2&orderby=viewCount"); 341 } 342 343 showDevelopersLivePlaylist(); 344 345 346 </script>
