Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
70 lines (57 sloc) 4.26 KB
<!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="html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header><h1>Syncing page content with HTML5 video</h1></header>
<div id="container">
<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/">Butter</a> makes is easy to create portable HTML5 content that is synced with a video.</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>
</body>
</html>