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