Permalink
Browse files

hello world

  • Loading branch information...
codepo8 committed Feb 24, 2011
0 parents commit 369ab6761a885ad92b5c9f7fdd02238ff9e9b081
Showing with 474 additions and 0 deletions.
  1. +75 −0 index.html
  2. +36 −0 play.html
  3. +36 −0 playfullsecond.html
  4. +258 −0 style.css
  5. +69 −0 sync.js
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Syncing page content with HTML5 video</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <link rel="stylesheet" href="style.css?v=2">
+ <!--[if lt IE 9]>
+ <script src="js/libs/html5shiv.js"></script>
+ <![endif]-->
+</head>
+<body>
+ <header><h1>Syncing page content with HTML5 video</h1></header>
+
+ <div id="container">
+
+ <aside id="video">
+ <video src="http://vid.ly/4f3q1f?content=video" controls></video>
+ </aside>
+
+ <article data-start="4" data-end="38">
+ <header><h1>HTML5 video</h1></header>
+ <p><a href="http://en.wikipedia.org/wiki/HTML5_video">HTML5 video</a> is native video for browsers based on the the <code>&lt;video&gt;</code> element..</p>
+ <iframe src="http://en.wikipedia.org/wiki/HTML5_video"></iframe>
+ </article>
+
+
+ <article data-start="39" data-end="63">
+ <header><h1>Miro Video converter</h1></header>
+ <p><a href="http://www.mirovideoconverter.com/">Miro Video converter</a> is an open source video conversion tool for Mac that makes it very easy to convert videos to all kind of formats via drag and drop.</p>
+ <iframe src="http://www.mirovideoconverter.com/"></iframe>
+ </article>
+
+ <article data-start="64" data-end="108">
+ <header><h1>Archive.org for conversion</h1></header>
+ <p><a href="http://archive.org">Archive.org</a> is a web site dedicated to archiving the internet. For content released as with a Creative Commons license it offers hosting for video and audio and automatically converts the content to MP4 and Ogg Video for you.</p>
+ <iframe src="http://archive.org"></iframe>
+ </article>
+
+ <article data-start="109" data-end="136">
+ <header><h1>Vid.ly for conversion into dozens of formats</h1></header>
+ <p><a href="http://vid.ly">Vid.ly</a> is a web service by <a href="http://encoding.com">Encoding.com</a> which creates dozens of formats of an uploaded video in almost real time. Using vid.ly you get a single URL that redirects browsers and mobile phones to the format they support the best.</p>
+ <iframe src="http://vid.ly"></iframe>
+ </article>
+
+ <article data-start="137" data-end="149">
+ <header><h1>Syncing video and page content (source code)</h1></header>
+ <p><a href="https://github.com/codepo8/Syncing-Video">This is the source code of this demo on GitHub</a> for you to fork and look at.</p>
+ <iframe src="https://github.com/codepo8/Syncing-Video"></iframe>
+ </article>
+
+ <article data-start="150" data-end="161">
+ <header><h1>Popcorn.js makes it easy to sync video with other content</h1></header>
+ <p><a href="http://popcornjs.org/">Popcorn.js</a> is a HTML5 video framework that makes it easy to sync video with other page content.</p>
+ <iframe src="http://popcornjs.org/"></iframe>
+ </article>
+
+ <article data-start="162" data-end="176">
+ <header><h1>Butter is a point and click interface to create interactive demos synced with video</h1></header>
+ <p><a href="http://popcornjs.org/butter/">Popcorn.js</a> is a HTML5 video framework that makes it easy to sync video with other page content.</p>
+ <iframe src="http://popcornjs.org/butter/"></iframe>
+ </article>
+
+ </div>
+
+ <footer> <small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png" /></a> <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Syncing page content with HTML5 video</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://icant.co.uk" property="cc:attributionName" rel="cc:attributionURL">Christian Heilmann</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>. Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://isithackday.com/syncing-video" rel="dct:source">isithackday.com</a>.</small>
+ <span class="logo"><a href="http://www.w3.org/html/logo/">
+ <img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-multimedia-semantics.png" width="197" height="64" alt="HTML5 Powered with CSS3 / Styling, Multimedia, and Semantics" title="HTML5 Powered with CSS3 / Styling, Multimedia, and Semantics">
+ </a></span>
+ </footer>
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
+<script src="sync.js"></script>
+</body>
+</html>
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Displaying the current time of a HTML5 video</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <link rel="stylesheet" href="style.css?v=2">
+ <!--[if lt IE 9]>
+ <script src="js/libs/html5shiv.js"></script>
+ <![endif]-->
+</head>
+<body>
+ <header><h1>Displaying the current time of a HTML5 video</h1></header>
+
+
+<div id="stage">
+ <video src="http://vid.ly/4f3q1f?content=video" controls></video>
+ <div id="time"></div>
+</div>
+<script>
+ (function(){
+ var v = document.getElementsByTagName('video')[0]
+ var t = document.getElementById('time');
+ v.addEventListener('timeupdate',function(event){
+ t.innerHTML = v.currentTime + '-' + parseInt(v.currentTime);
+ },false);
+ })();
+</script>
+
+ <footer> <small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png" /></a> <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Syncing page content with HTML5 video</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://icant.co.uk" property="cc:attributionName" rel="cc:attributionURL">Christian Heilmann</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>. Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://isithackday.com/syncing-video" rel="dct:source">isithackday.com</a>.</small>
+ <span class="logo"><a href="http://www.w3.org/html/logo/">
+ <img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-multimedia-semantics.png" width="197" height="64" alt="HTML5 Powered with CSS3 / Styling, Multimedia, and Semantics" title="HTML5 Powered with CSS3 / Styling, Multimedia, and Semantics">
+ </a></span>
+ </footer>
+</body>
+</html>
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Displaying the current time of a HTML5 video</title>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <link rel="stylesheet" href="style.css?v=2">
+ <!--[if lt IE 9]>
+ <script src="js/libs/html5shiv.js"></script>
+ <![endif]-->
+</head>
+<body>
+ <header><h1>Displaying the current time of a HTML5 video</h1></header>
+
+
+<div id="stage">
+ <video src="http://vid.ly/4f3q1f?content=video" controls></video>
+ <div id="time"></div>
+</div>
+<script>
+ (function(){
+ var v = document.getElementsByTagName('video')[0]
+ var t = document.getElementById('time');
+ v.addEventListener('timeupdate',function(event){
+ t.innerHTML = parseInt(v.currentTime) + ' - ' + v.currentTime;
+ },false);
+ })();
+</script>
+
+ <footer> <small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png" /></a> <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Syncing page content with HTML5 video</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://icant.co.uk" property="cc:attributionName" rel="cc:attributionURL">Christian Heilmann</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 Unported License</a>. Based on a work at <a xmlns:dct="http://purl.org/dc/terms/" href="http://isithackday.com/syncing-video" rel="dct:source">isithackday.com</a>.</small>
+ <span class="logo"><a href="http://www.w3.org/html/logo/">
+ <img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-multimedia-semantics.png" width="197" height="64" alt="HTML5 Powered with CSS3 / Styling, Multimedia, and Semantics" title="HTML5 Powered with CSS3 / Styling, Multimedia, and Semantics">
+ </a></span>
+ </footer>
+</body>
+</html>
Oops, something went wrong.

0 comments on commit 369ab67

Please sign in to comment.