1excludeFromSuggestions=true
2fullpage=true
3page.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
24h1 {
25  font-weight:100;
26  font-size:40px;
27  line-height:30px;
28  margin:30px 0 10px 0px;
29  color:#000;
30}
31
32h2 {
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
46ul.videos {
47  list-style:none;
48  margin:0;
49  width:auto;
50}
51ul.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}
61ul.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}
76ul.videos.featured li {
77  margin:0 0 2px;
78}
79ul.videos.featured li a {
80  margin:0;
81  height:115px;
82}
83ul.videos li a:hover {
84  box-shadow:inset 500px 500px 999px rgba(255,255,255, 0.6);
85}
86ul.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
95ul.videos li .description-frame {
96  display:none;
97  z-index:2; /* IE: the li is 1 */
98}
99ul.videos li a:hover .description-frame {
100  display:block;
101  position:absolute;
102  top:80px;
103  left:8px;
104  z-index:99;
105}
106ul.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}
121ul.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}
131ul.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
142ul.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}
155ul.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}
159ul.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}
163ul.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&reg; 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 */
236function 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
244function buildPlaylistDesign(data) {
245  buildPlaylist(data, $('ul#playlist1 #videos-design'), "design");
246}
247
248function buildPlaylistDevelop(data) {
249  buildPlaylist(data, $('ul#playlist1 #videos-develop'), "develop");
250}
251
252function buildPlaylistDistribute(data) {
253  buildPlaylist(data, $('ul#playlist1 #videos-distribute'), "distribute");
254}
255
256function buildPlaylist2(data) {
257  buildPlaylist(data, $('ul#playlist2'));
258}
259
260function 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 */
321function 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
344showDevelopersLivePlaylist();
345
346
347</script>