Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

hello world

  • Loading branch information...
commit 369ab6761a885ad92b5c9f7fdd02238ff9e9b081 0 parents
@codepo8 authored
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
75 index.html
@@ -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>
36 play.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>
36 playfullsecond.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>
258 style.css
@@ -0,0 +1,258 @@
+
+/* ==== Scroll down to find where to put your styles :) ==== */
+
+
+/* HTML5 Boilerplate
+
+ html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
+ v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+ margin:0;
+ padding:0;
+ border:0;
+ outline:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background:transparent;
+}
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display:block;
+}
+nav ul { list-style:none; }
+blockquote, q { quotes:none; }
+blockquote:before, blockquote:after,
+q:before, q:after { content:''; content:none; }
+a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
+ins { background-color:#ff9; color:#000; text-decoration:none; }
+mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
+del { text-decoration: line-through; }
+abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
+table { border-collapse:collapse; border-spacing:0; }
+hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
+input, select { vertical-align:middle; }
+
+/* End of Reset CSS
+
+fonts.css from the YUI Library: developer.yahoo.com/yui/ */
+
+body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
+select, input, textarea, button { font:99% sans-serif; }
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+
+/*
+ * HTML5 Boilerplate - minimal base styles
+ */
+
+body, select, input, textarea {
+ color: #444;
+ /* font-family: Georgia, serif; */
+}
+h1,h2,h3,h4,h5,h6 { font-weight: bold; }
+html { overflow-y: scroll; }
+ul, ol { margin-left: 1.8em; }
+ol { list-style-type: decimal; }
+nav ul, nav li { margin: 0; }
+small { font-size: 85%; }
+strong, th { font-weight: bold; }
+td, td img { vertical-align: top; }
+sub { vertical-align: sub; font-size: smaller; }
+sup { vertical-align: super; font-size: smaller; }
+pre {
+ padding: 15px;
+ white-space: pre; /* CSS2 */
+ white-space: pre-wrap; /* CSS 2.1 */
+ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
+ word-wrap: break-word; /* IE */
+}
+textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
+.ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */
+input[type="radio"] { vertical-align: text-bottom; }
+input[type="checkbox"] { vertical-align: bottom; }
+.ie7 input[type="checkbox"] { vertical-align: baseline; }
+.ie6 input { vertical-align: text-bottom; }
+label, input[type=button], input[type=submit], button { cursor: pointer; }
+button, input, select, textarea { margin: 0; }
+input:valid, textarea:valid { }
+input:invalid, textarea:invalid {
+ border-radius: 1px;
+ -moz-box-shadow: 0px 0px 5px red;
+ -webkit-box-shadow: 0px 0px 5px red;
+ box-shadow: 0px 0px 5px red;
+}
+.no-boxshadow input:invalid,
+.no-boxshadow textarea:invalid { background-color: #f0dddd; }
+
+/* By default the selection color is pink */
+::-moz-selection{ background: #f16529; color:#fff; text-shadow: none; }
+::selection { background:#f16529; color:#fff; text-shadow: none; }
+a:link { -webkit-tap-highlight-color: #FF5E99; }
+button { width: auto; overflow: visible; }
+.ie7 img { -ms-interpolation-mode: bicubic; }
+
+
+/*
+ * Non-semantic helper classes
+ */
+
+/* for image replacement */
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+
+/* Hide for both screenreaders and browsers */
+.hidden { display: none; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders */
+.visuallyhidden { position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px); }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Clearfix */
+.clearfix:before, .clearfix:after {
+ content: "\0020"; display: block; height: 0; visibility: hidden;
+}
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
+/*
+ // ========================================== \\
+ || ||
+ || Your styles ! ||
+ || ||
+ \\ ========================================== //
+*/
+
+body,html{
+ background:#fff;color:#000;
+ font-family:Helvetica,arial,Sans-serif;
+}
+
+header,footer,aside,article,section,iframe{
+ display:block;
+}
+video{
+ display:block;
+ width:320px;
+ height:200px;
+ margin-bottom:10px;
+}
+#stage{padding:2em;}
+#time{padding:1em 0;font-size:18px;}
+aside{
+ width:320px;
+ position:absolute;
+ left:0;
+ top:0;
+}
+aside p{font-size:12px;}
+.js article{
+ position:absolute;
+ left:-9999px;
+}
+.js article.current{
+ position:relative;
+ left:0;
+}
+header,footer{
+ margin:.5em 20px;
+ padding:10px 0;
+}
+header{
+ border-bottom:2px solid #666;
+}
+footer{
+ border-top:2px solid #666;
+}
+article header{
+ border:none;
+ padding:10px 0;
+ margin:0;
+}
+
+#container{
+ margin:20px;
+ padding-left:350px;
+ position:relative;
+ min-height:250px;
+}
+.logo{
+ display:block;
+ margin:10px auto;
+}
+
+iframe{
+ width:98%;
+ margin:1em 0;
+ height:400px;
+ -moz-box-shadow:4px 4px 10px rgba(0,0,0,.8);
+ -webkit-box-shadow:4px 4px 10px rgba(0,0,0,.8);
+ box-shadow:4px 4px 10px rgba(0,0,0,.8);
+}
+h1{
+ font-size:30px;
+ color:#000;
+ padding:0;
+ font-weight:normal;
+ text-transform:uppercase;
+}
+article h1{
+ font-size:22px;
+}
+p,li{
+ color:#333;
+ font-size:18px;
+ line-height:1.3em;
+ padding-bottom:.5em;
+}
+aside h1{font-size:20px;}
+p a{font-size:100%;color:#600;font-weight:bold;text-decoration:none;}
+p a:hover{color:#fff;background:#600;}
+footer a{color:#000;}
+
+/*
+ * CSS3 Media queries
+ */
+
+@media all and (orientation:portrait) {
+
+}
+
+@media all and (orientation:landscape) {
+
+}
+
+@media screen and (max-device-width: 480px) {
+
+}
+
+@media print {
+ * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
+ a, a:visited { color: #444 !important; text-decoration: underline; }
+ a:after { content: " (" attr(href) ")"; }
+ abbr:after { content: " (" attr(title) ")"; }
+ .ir a:after { content: ""; } /* Don't show links for images */
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+ thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
+ tr, img { page-break-inside: avoid; }
+ @page { margin: 0.5cm; }
+ p, h2, h3 { orphans: 3; widows: 3; }
+ h2, h3{ page-break-after: avoid; }
+}
+
69 sync.js
@@ -0,0 +1,69 @@
+/* if the document is ready... */
+$(document).ready(function(){
+
+/* if HTML5 video is supported */
+ if($('video').attr('canPlayType')){
+
+ $('aside::first').append('<p>Play the video above and see how ' +
+ 'the different connected content sections ' +
+ 'in the page appear at the right moment. '+
+ 'Feel free to jump forward and backward</p>');
+
+ var timestamps = [],
+ last = 0,
+ all = 0,
+ now = 0,
+ old = 0,
+ i=0;
+
+/* hide all articles via CSS */
+ $('html').addClass('js');
+
+/*
+ Loop over the articles, read the timestamp start and end and store
+ them in an array
+*/
+ $('article').each(function(o){
+ if($(this).attr('data-start')){
+ timestamps.push({
+ start : +$(this).attr('data-start'),
+ end : +$(this).attr('data-end'),
+ elm : $(this)
+ });
+ }
+ });
+
+ all = timestamps.length;
+
+/*
+ when the video is playing, round up the time to seconds and call the
+ showsection function continuously
+*/
+ $('video').bind('timeupdate',function(event){
+ now = parseInt(this.currentTime);
+
+ /* throttle function calls to full seconds */
+ if(now > old){
+ showsection(now);
+ }
+ old = now;
+
+ });
+
+/*
+ Test if the current time is within the range of any of the
+ defined timestamps and show the appropriate section.
+ Hide all others.
+*/
+ function showsection(t){
+ for(i=0;i<all;i++){
+ if(t >= timestamps[i].start && t <= timestamps[i].end){
+ timestamps[i].elm.addClass('current');
+ } else {
+ timestamps[i].elm.removeClass('current');
+ }
+ }
+ };
+
+ };
+});
Please sign in to comment.
Something went wrong with that request. Please try again.