347 lines
9.5 KiB
Plaintext
347 lines
9.5 KiB
Plaintext
excludeFromSuggestions=true
|
|
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® 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> |