blob: 977eb2f2aed34ede98634f4964cb3c02373db812 [file] [log] [blame]
fullpage=true
page.title=Google I/O 13
@jd:body
<style>
#ioplayer-frame {
z-index:10;
width:703px;
height:396px;
margin:0;
position:relative;
}
#noplayer-message {
position:absolute;
top:50%;left:0;
width:100%;
z-index:-1;
text-align:center;
display:none;
}
h1 {
font-weight:100;
font-size:40px;
line-height:30px;
margin:30px 0 10px 0px;
color:#000;
}
h2 {
font-weight:100;
font-size:30px;
line-height:30px;
margin:12px 0 10px 0px;
color:#000;
float:left;
display:block;
}
.col-4 h2 {
margin-top:40px;
}
ul.videos {
list-style:none;
margin:0;
width:auto;
}
ul.videos li {
display:block;
float:left;
position:relative;
margin:0 2px 2px 0;
background-repeat:no-repeat !important;
background-size:320px auto;
background-position:10% 50%;
z-index:1; /* IE: the description is 2 */
}
ul.videos li a {
color:#fff !important;
display:block;
margin:0;
padding:8px 12px;
width:209px;
height:134px;
box-shadow:inset 500px 500px 999px rgba(000, 000, 000, 0.2);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.8)), color-stop(1, transparent));
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.8), transparent);
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.8), transparent);
background-image: -o-linear-gradient(top, rgba(0,0,0,0.8), transparent);
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
ul.videos.featured li {
margin:0 0 2px;
}
ul.videos.featured li a {
margin:0;
height:115px;
}
ul.videos li a:hover {
box-shadow:inset 500px 500px 999px rgba(255,255,255, 0.6);
}
ul.videos li h4 {
text-shadow:1px 1px 0 rgba(0,0,0,0.8);
font-size:18px;
line-height:22px;
color:#fff;
margin:0;
height:100%; /* IE: to fill clickable area */
}
ul.videos li .description-frame {
display:none;
z-index:2; /* IE: the li is 1 */
}
ul.videos li a:hover .description-frame {
display:block;
position:absolute;
top:80px;
left:8px;
z-index:99;
}
ul.videos .description {
background:#fff;
width:200px;
padding:8px;
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
-moz-box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);
-webkit-box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);
box-shadow: 0 2px 3px 2px rgba(000,000,000, 0.4);
font-size:11px;
line-height:12px;
color:#000;
overflow:hidden;
}
ul.videos .arrow-up {
position:absolute;
left:15px;
top:-11px;
width:0;
height:0;
border-bottom:12px solid #fff;
border-left:12px solid transparent;
border-right:12px solid transparent;
}
ul.videos .arrow-down {
position:absolute;
left:15px;
bottom:-11px;
width:0;
height:0;
border-top:12px solid #fff;
border-left:12px solid transparent;
border-right:12px solid transparent;
}
ul.videos span.tag {
font-size:.9em;
font-weight:normal;
display: block;
position: absolute;
bottom: 0;
color: #fff;
left: 0;
padding: 4px;
border-top-right-radius:4px;
text-transform:uppercase;
text-shadow: none;
}
ul.videos span.tag.design {
background-color:rgba(51, 181, 229, .7);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc33b5e5', endColorstr='#cc33b5e5',GradientType=0 ); /* IE6-9 */
}
ul.videos span.tag.develop {
background-color:rgba(255, 136, 0, .7);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccff8800', endColorstr='#ccff8800',GradientType=0 ); /* IE6-9 */
}
ul.videos span.tag.distribute {
background-color:rgba(153, 204, 0, .7);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc99cc00', endColorstr='#cc99cc00',GradientType=0 ); /* IE6-9 */
}
</style>
<div class="wrap">
<div class="col-12" style="width:704px;margin:0">
<h1>Android @ Google I/O 13</h1>
<div id="ioplayer-frame">
<div id="noplayer-message">
<!-- busted flash player message -->
Your video is supposed to appear here.<br/>
Make sure you have the <a href="//get.adobe.com/flashplayer/" target="_blank">Flash&reg; Player</a>.
</div>
<div id="player"><!-- Youtube embeds here... actually replaces this div --></div>
</div>
</div>
<div class="col-4" style="margin:0;width:234px;padding:0 0 0 2px">
<h2 class="norule">Most Popular</h2>
<ul class="videos featured" id="playlist2">
</ul>
</div>
</div>
<div class="wrap">
<div style="position:absolute;width:940px;text-align:right">
<a href="//www.youtube.com/AndroidDevelopers" target="_blank">
More on YouTube
<img src="//www.youtube.com/favicon.ico" style="border:0;width:16px;height:16px;vertical-align:middle;margin:0 2px 3px 2px">
</a>
</div>
<div style="width:944px;overflow:hidden;padding:0 0 20px">
<h2 class="norule">All Videos</h2>
<ul class="videos" id="playlist1" style="clear:left">
<span id="videos-design"></span>
<span id="videos-develop"></span>
<span id="videos-distribute"></span>
</ul>
</div>
</div>
<br class="clearfix"/>
<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
/* Load a video into the player box.
* @param id The YouTube video ID
* @param title The video title to display in the player box (character escaped)
* @param autoplay Whether to automatically play the video
*/
function loadVideo(id, title, autoplay) {
var url = '//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1' + (autoplay?'&autoplay=1':'');
swfobject.embedSWF(url, 'player', '704', '397', '9.0.0', false, false, {allowfullscreen: 'true'});
$('body,html').animate({ scrollTop: 0 }, "slow");
setTimeout(function(){$('#noplayer-message').show()}, 2000);
}
function buildPlaylistDesign(data) {
buildPlaylist(data, $('ul#playlist1 #videos-design'), "design");
}
function buildPlaylistDevelop(data) {
buildPlaylist(data, $('ul#playlist1 #videos-develop'), "develop");
}
function buildPlaylistDistribute(data) {
buildPlaylist(data, $('ul#playlist1 #videos-distribute'), "distribute");
}
function buildPlaylist2(data) {
buildPlaylist(data, $('ul#playlist2'));
}
function buildPlaylist(data, ul, tag) {
var MAX_DESC_LENGTH = 200; // the length at which we will trim the description
var feed = data.feed;
var entries = feed.entry || [];
var playlistId = feed.yt$playlistId.$t;
// Loop through each entry (each video) and add it to the '#DevelopersLive' list
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t;
var id = entry.media$group.yt$videoid.$t;
// get 180x320 thumbnail
var thumbs = entry.media$group.media$thumbnail;
var thumbUrl;
for (var j = 0; j < thumbs.length; j++) {
if (thumbs[j].yt$name == "hqdefault") {
thumbUrl = thumbs[j].url;
}
}
// chop out the google io title
title = title.substr(title.indexOf("-") + 1, title.length);
var fullDescription = entry.media$group.media$description.$t;
var playerUrl = entry.media$group.media$content[0].url;
var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH);
// further shorten description if there's a url (remove it)
var httpindex = shortDescription.indexOf("http://");
if (httpindex != -1) {
shortDescription = shortDescription.substring(0,httpindex);
}
shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
var a = $('<a href="#" id="' + id + '" '
+ 'onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
var pShortDescription = $('<div class="description-frame"><div class="arrow-up"></div>'
+ '<div class="description">' + shortDescription + '</div></div>');
var h4Title = "<h4>" + title + "</h4>";
var li = $('<li style="background-image:url(\'' + thumbUrl +'\')" />');
li.append(a);
a.append(h4Title).append(pShortDescription);
if (tag !== undefined) {
var $tag = $('<span class="tag ' + tag + '">' + tag + '</span>');
a.append($tag);
}
ul.append(li);
// put the first video in the player
if ((tag == "design") && (i == 0)) {
loadVideo(id, escape(title), false);
}
}
}
/* Request the playlist feeds from YouTube */
function showDevelopersLivePlaylist() {
var playlistId = "PLWz5rJ2EKKc-qVhMuAprIFYFbCotdgJKq"; /* IO 13 - Design */
$.getScript("//gdata.youtube.com/feeds/api/playlists/"
+ playlistId +
"?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDesign&orderby=position");
playlistId = "PLWz5rJ2EKKc9rkwO9yBosRvkQBJd5utmR"; /* IO 13 - Develop */
$.getScript("//gdata.youtube.com/feeds/api/playlists/"
+ playlistId +
"?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDevelop&orderby=position");
playlistId = "PLWz5rJ2EKKc-1WjgQqL0B4OQtbLfhMlB2"; /* IO 13 - Distribute */
$.getScript("//gdata.youtube.com/feeds/api/playlists/"
+ playlistId +
"?v=2&alt=json-in-script&max-results=50&callback=buildPlaylistDistribute&orderby=position");
playlistId = "PLWz5rJ2EKKc9WGUwq2gQ-coU3fSyexgOx"; /* IO 13 - The Android Sessions */
$.getScript("//gdata.youtube.com/feeds/api/playlists/"
+ playlistId +
"?v=2&alt=json-in-script&max-results=3&callback=buildPlaylist2&orderby=viewCount");
}
showDevelopersLivePlaylist();
</script>