Browse files

Example of how you can do the OK Go Dance message for all HTML5 browsers

  • Loading branch information...
0 parents commit 70086790500e5eaf823244025e9e9c7d8bbe726b @codepo8 committed Aug 1, 2011
BIN .DS_Store
Binary file not shown.
BIN atoz/.DS_Store
Binary file not shown.
BIN atoz/0.mp4
Binary file not shown.
BIN atoz/0.webm
Binary file not shown.
BIN atoz/1.mp4
Binary file not shown.
BIN atoz/1.webm
Binary file not shown.
BIN atoz/2.mp4
Binary file not shown.
BIN atoz/2.webm
Binary file not shown.
BIN atoz/3.mp4
Binary file not shown.
BIN atoz/3.webm
Binary file not shown.
BIN atoz/4.mp4
Binary file not shown.
BIN atoz/4.webm
Binary file not shown.
BIN atoz/5.mp4
Binary file not shown.
BIN atoz/5.webm
Binary file not shown.
BIN atoz/6.mp4
Binary file not shown.
BIN atoz/6.webm
Binary file not shown.
BIN atoz/7.mp4
Binary file not shown.
BIN atoz/7.webm
Binary file not shown.
BIN atoz/8.mp4
Binary file not shown.
BIN atoz/8.webm
Binary file not shown.
BIN atoz/9.mp4
Binary file not shown.
BIN atoz/9.webm
Binary file not shown.
BIN atoz/A.mp4
Binary file not shown.
BIN atoz/A.webm
Binary file not shown.
BIN atoz/B.mp4
Binary file not shown.
BIN atoz/B.webm
Binary file not shown.
BIN atoz/C.mp4
Binary file not shown.
BIN atoz/C.webm
Binary file not shown.
BIN atoz/D.mp4
Binary file not shown.
BIN atoz/D.webm
Binary file not shown.
BIN atoz/E.mp4
Binary file not shown.
BIN atoz/E.webm
Binary file not shown.
BIN atoz/F.mp4
Binary file not shown.
BIN atoz/F.webm
Binary file not shown.
BIN atoz/G.mp4
Binary file not shown.
BIN atoz/G.webm
Binary file not shown.
BIN atoz/H.mp4
Binary file not shown.
BIN atoz/H.webm
Binary file not shown.
BIN atoz/I.mp4
Binary file not shown.
BIN atoz/I.webm
Binary file not shown.
BIN atoz/J.mp4
Binary file not shown.
BIN atoz/J.webm
Binary file not shown.
BIN atoz/K.mp4
Binary file not shown.
BIN atoz/K.webm
Binary file not shown.
BIN atoz/L.mp4
Binary file not shown.
BIN atoz/L.webm
Binary file not shown.
BIN atoz/M.mp4
Binary file not shown.
BIN atoz/M.webm
Binary file not shown.
BIN atoz/N.mp4
Binary file not shown.
BIN atoz/N.webm
Binary file not shown.
BIN atoz/O.mp4
Binary file not shown.
BIN atoz/O.webm
Binary file not shown.
BIN atoz/P.mp4
Binary file not shown.
BIN atoz/P.webm
Binary file not shown.
BIN atoz/Q.mp4
Binary file not shown.
BIN atoz/Q.webm
Binary file not shown.
BIN atoz/R.mp4
Binary file not shown.
BIN atoz/R.webm
Binary file not shown.
BIN atoz/S.mp4
Binary file not shown.
BIN atoz/S.webm
Binary file not shown.
BIN atoz/T.mp4
Binary file not shown.
BIN atoz/T.webm
Binary file not shown.
BIN atoz/U.mp4
Binary file not shown.
BIN atoz/U.webm
Binary file not shown.
BIN atoz/V.mp4
Binary file not shown.
BIN atoz/V.webm
Binary file not shown.
BIN atoz/W.mp4
Binary file not shown.
BIN atoz/W.webm
Binary file not shown.
BIN atoz/X.mp4
Binary file not shown.
BIN atoz/X.webm
Binary file not shown.
BIN atoz/Y.mp4
Binary file not shown.
BIN atoz/Y.webm
Binary file not shown.
BIN atoz/Z.mp4
Binary file not shown.
BIN atoz/Z.webm
Binary file not shown.
BIN atoz/blank.mp4
Binary file not shown.
BIN atoz/blank.theora.ogv
Binary file not shown.
BIN atoz/blank.webm
Binary file not shown.
BIN atoz/index.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>OK Go's All is not Lost Dance message - now for all HTML5 browsers</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+<style>
+ @font-face {
+ font-family: 'Special Elite';
+ font-style: normal;
+ font-weight: normal;
+ src: local('Special Elite'), local('SpecialElite-Regular'), url('http://themes.googleusercontent.com/static/fonts/specialelite/v1/9-wW4zu3WNoD5Fjka35Jm4kaQb-UsZVONjobs91YQtw.woff') format('woff');
+ }
+ /* ^ gee, look at that, text doesn't have to be in images! */
+
+ *{margin:0;padding:0;font-family:"special elite",helvetica,arial,sans-serif}
+ body{color:#333;background:#f8f8f8}
+ h1{font-size:35px;color:#999}
+ h2{font-size:16px;color:#666;padding:5px}
+ a{color:#000}
+ footer a{text-decoration:none}
+ footer,section,header{display:block;}
+ li{float:left;list-style:none}
+ video,img{display:block;}
+ #videocontainer{
+ width:840px;
+ background:url(atoz/index.jpg);
+ overflow:hidden;
+ margin:1em auto;
+ box-shadow:4px 4px 10px rgba(0,0,0,.4);
+ }
+ p{line-height:1.5em}
+ form{font-size:24px;margin:2em;}
+ input{font-size:24px;margin-left:5px;}
+ header,footer,article,section.yeswecan{width:750px;margin:20px auto}
+ form{text-align:center;}
+ footer{text-align:right;font-size:10px;clear:both;
+ border-top:1px solid #ccc;margin-top:5em;}
+ iframe{display:block;margin:1em auto}
+ #test{display:none}
+</style>
+
+</head>
+<body>
+ <header>
+ <h1>OK Go's "All is not Lost Dance" message</h1>
+ <h2>Now available for all HTML5 browsers</h2>
+ </header>
+ <article><p>A few days ago, OK Go, Pilobolus and Trish Sie together with Google engineers released <a href="http://www.allisnotlo.st">All is not Lost</a>, another interactive video experiment by Google. It is optimised for Chrome and very demanding on your hardware. If you use Chrome and have a beefy machine, <a href="http://www.allisnotlo.st">check it out live</a>, otherwise here is a video:</p>
+ <iframe width="560" height="349" src="http://www.youtube.com/embed/ur-y7oOto14" frameborder="0" allowfullscreen></iframe>
+ </article>
+ <footer>
+ <p>Written by
+ <a href="http://wait-till-i.com/">Chris Heilmann</a> -
+ <a href="http://twitter.com/codepo8">@codepo8</a>
+ </p>
+ <video id="test">
+ <source type="video/webm" src="atoz/A.webm">
+ <source type="video/mp4" src="atoz/A.mp4">
+ </video>
+</footer>
+<script src="itcanonlygetbetter.js"></script>
+</body>
+</html>
112 itcanonlygetbetter.js
@@ -0,0 +1,112 @@
+(function(){
+ var type = 'webm',
+ i = 0,
+ j = 0;
+
+ function init(){
+ var v = document.querySelector('video');
+ v.addEventListener('canplay',function(event){
+ if(v.currentSrc.indexOf('mp4') !== - 1){
+ type = 'mp4';
+ }
+ v.parentNode.removeChild(v);
+ /*
+ ^ this checks if we need MP4 or webM. My Safari on Lion tells me
+ it groks WebM (as I have Perian installed). Alas, it doesn't. Damn
+ you, Safari!
+ */
+ render();
+ },false);
+ };
+
+ function render(){
+ var container = document.createElement('section');
+ var target = document.querySelector('article');
+ target.parentNode.insertBefore(container,target);
+ container.innerHTML = '<ul id="videocontainer"></ul>'+
+ '<form action="index.html">'+
+ '<div><label for="message">Your Message:</label>'+
+ '<input type="text" name="message" id="message"'+
+ ' value="html5 for all browsers">'+
+ '<input type="submit" value="OK, Go!">'+
+ '</div></form>';
+ var wefixedit = document.createElement('section');
+ wefixedit.className = 'yeswecan';
+ wefixedit.innerHTML = '<p>This experiment shows that the final part of'+
+ ' All is Not Lost can easily be created for all'+
+ ' HTML5 browsers. Enjoy.</p>';
+ container.parentNode.insertBefore(wefixedit,container.nextSibling);
+ /*
+ ^ Why not only give messages to those who can read them and HTML
+ to those who can use it? Saves you having to write bad FAQs.
+ */
+
+ resizecontainer();
+ window.addEventListener('resize',function(event){
+ resizecontainer();
+ },false);
+ /*
+ ^ Let's use all the space rather than telling people what resolution
+ they need, eh?
+ */
+
+ var s = document.location.href;
+ if(s.indexOf('?message=') !== -1){
+ s = s.split('?message=');
+ s = s[1].replace(/%20/g,' ');
+ plotvideos(s);
+ }
+ /* ^ you can send your message via URL :) */
+
+ document.querySelector('form').addEventListener('submit',function(event){
+ resizecontainer();
+ plotvideos(document.querySelector('#message').value);
+ event.preventDefault();
+ },false);
+ /* ^ no need to reload when new messages are entered */
+
+ };
+
+ function resizecontainer(){
+ var container = document.querySelector('#videocontainer');
+ var s = parseInt(window.innerWidth/120,10);
+ container.style.width = (s*120) + 'px';
+ container.style.margin = '10px auto';
+ };
+
+ function plotvideos(s){
+ var c = document.querySelector('#videocontainer');
+ s = s.toUpperCase();
+ var bits = s.split('');
+ var out = '';
+ for(i=0,j=bits.length;i<j;i++){
+ if(bits[i]!==' '){
+ out += '<li>'+
+ '<video src="atoz/'+bits[i]+'.'+type+'"'+
+ ' width="120" height="90" autoplay loop></video>'+
+ '</li>';
+ } else {
+ out += '<li>'+
+ '<img src="atoz/index.jpg"'+
+ ' alt="" width="120" height="90">'+
+ '</li>';
+ }
+ }
+ c.innerHTML = out;
+ /* ^ How easy is this, eh? */
+
+ var x = document.querySelectorAll('video');
+ for(i=0,j=x.length;i<j;i++){
+ x[i].addEventListener('ended',
+ function(event){
+ this.play();
+ }
+ ,false);
+ }
+ /* ^ As Firefox has no loop :( */
+
+ };
+ if(document.querySelector){
+ init();
+ }
+})();

0 comments on commit 7008679

Please sign in to comment.