Browse files

cleanup

  • Loading branch information...
1 parent 6ee93d7 commit abe2d4138dac5782d412659b9cd757097d4e34de @codepo8 committed Feb 25, 2011
View
BIN archiveorg.png
Deleted file not rendered
View
244 article.html
@@ -1,244 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Syncing 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]-->
- <style type="text/css" media="screen">
- body{width:740px;margin:10px auto;}
- pre,code{white-space:pre;}
- h2{font-size:22px;}
- </style>
-</head>
-<body>
-<h1>Syncing content with HTML5 video</h1>
-<p>One of the main changes from HTML4 to HTML5 is that the new specifications breaks a few of the boundaries browsers have been confined in. Instead of only text, links, images and forms for interaction with the user HTML5 promotes multimedia from a generic <code>&lt;object&gt;</code> element to a highly specified <code>&lt;video&gt;</code> and <code>&lt;audio&gt;</code> element with a rich API to access in pure JavaScript. </p>
-
-<p>Native multimedia has a few benefits:</p>
-
-<ul><li><strong>End users have full control over the multimedia</strong> - the native controls of browsers allow users to save videos locally or email them to friends and HTML5 video and audio is by default keyboard enabled which is a great accessibility benefit.</li><li><strong>End users do not have to have a plugin installed to play them</strong> - the browser already has everything in it needed to play movies or sounds.</li><li><strong>Video and audio content in the page can be manipulated</strong> - they are simply two new elements that can be styled, moved, manipulated, stacked and rotated.</li><li><strong>You can build your own controls using HTML,CSS and JavaScript</strong> - no new skills or development environment needed</li><li><strong>Interaction with the rest of the page is simple</strong> - the multimedia API gives you full control over the video and you can react both to changes in the video and the page around it.</li></ul>
-
-<p>Let's quickly recap how you can use native video in browsers, starting with the embedding task.</p>
-
-<h2>Embedding video</h2>
-
-<p>This is old news - embedding video into a document is as easy as adding a <code>&lt;video&gt;</code> element and point it to a source video. If you add a <code>controls</code> attribute you get native controls:</p>
-
-<pre><code>&lt;video src=&quot;chris.ogv&quot; controls&gt;&lt;/video&gt;</code></pre>
-
-<p>This is the theory though. In the real world of intellectual property, corporate competition and device-specific solutions we have to jump through a few hoops as developers:</p>
-
-<pre><code>&lt;video controls=&quot;true&quot; height=&quot;295&quot; width=&quot;480&quot;&gt;
- &lt;!-- hello iOS, Safari and IE9 --&gt;
- &lt;source src=&quot;chris.mp4&quot; type=&quot;video/mp4&quot;&gt;
- &lt;!-- Hello Chrome and Firefox (and Opera?) --&gt;
- &lt;source src=&quot;chris.webm&quot; type=&quot;video/webm&quot;&gt;
- &lt;!-- Hello Firefox and Opera --&gt;
- &lt;source src=&quot;chris.ogv&quot; type=&quot;video/ogg&quot;&gt;
- &lt;!-- Hello legacy --&gt;
- Your browser does not support the video tag,
- &lt;a href=&quot;http://www.youtube.com/watch?v=IhkUe_KryGY&quot;&gt;
- check the video on YouTube
- &lt;/a&gt;.
-&lt;/video&gt;</code></pre>
-
-<p>So this means we need to provide the video in 3 formats to satisfy all the different browsers out there. There are a few ways to accomplish this. Here's what I do:</p>
-
-<h2>Converting video with Miro Video Converter</h2>
-
-<p><a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> is an open source tool for Mac that makes it dead easy to convert videos. Simply drag the video to the tool, select WebM as the output format and see the progress. There are a few <a href="http://www.webmproject.org/tools/">other converters for Windows and Linux</a> available, too.</p>
-
-<p><a href="http://www.mirovideoconverter.com/"><img src="miro.png" alt="Miro Video Converter in action - simply drag a video, select output format and press convert"></a></p>
-
-<h2>Hosting and automated conversion at Archive.org</h2>
-
-<p>As I license my videos with <a href="http://creativecommons.org">Creative Commons</a> I can use <a href="http://archive.org">Archive.org</a> for both hosting and converting the WebM video to MP4 and OGV - simply upload it and wait approximately an hour. Reload the page and the server pixies at Archive.org will have created the other two formats (and also a cool animated GIF of your video).</p>
-
-<p><a href="http://archive.org"><img src="archiveorg.png" alt="Different versions of an uploaded video by archive.org"></a></p>
-
-<h2>Industrial strength conversion with Vid.ly</h2>
-
-<p>Creating a WebM, OGV and MP4 only takes care of the major browsers though. If you want to support all mobile devices, tablets and consoles and you want to have adaptive quality according to connection speed you'll end up creating a few dozen different versions of the same video. Encoding.com felt our pain and released a free service called <a href="http://vid.ly">Vid.ly</a> which converts a video you upload more or less in realtime into a lot of different formats.</p>
-
-<p><a href="http://vid.ly"><img src="vidly.png" alt="Different versions of an uploaded video by archive.org"></a></p>
-
-<p>Furthermore, vid.ly creates a URL for your video that automatically redirects the browser or device calling it to the right format. This means that your embed stays as simple as possible:</p>
-
-
-
-<pre><code>&lt;video src=&quot;http://vid.ly/4f3q1f?content=video&quot; controls&gt;&lt;/video&gt;</code></pre>
-
-<p>Cool, isn't it?</p>
-
-<h2>Showing the power of the HTML5 Video API - syncing content</h2>
-
-<p>Now that we have our video in the page, let's check out the power of the API. Say for example you wanted to know what part of the movie is playing right now. This is as simple as subscribing to an event of the video element:</p>
-
-<pre><code>&lt;div id=&quot;stage&quot;&gt;
- &lt;video src=&quot;http://vid.ly/4f3q1f?content=video&quot; controls&gt;&lt;/video&gt;
- &lt;div id=&quot;time&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
- (function(){
- var v = document.getElementsByTagName('video')[0]
- var t = document.getElementById('time');
- v.addEventListener('timeupdate',function(event){
- t.innerHTML = v.currentTime;
- },false);
- })();
-&lt;/script&gt;</code></pre>
-
-<p>If you <a href="http://isithackday.com/syncing-video/play.html">try this out in your browser</a> you can see the current time below the video when you play it.</p>
-
-<p><a href="http://isithackday.com/syncing-video/play.html"><img src="time.png" alt="Displaying the current time of a video"></a></p>
-
-<p>You can also see that the event <code>timeupdate</code> gets fired a lot and at somehow random times. If you want to use this to sync showing and hiding parts of the document, you'll need to throttle this somehow - the easiest way is to <a href="http://isithackday.com/syncing-video/playfullsecond.html">limit the number to full seconds</a> using <code>parseInt()</code>:</p>
-
-<pre><code>&lt;div id=&quot;stage&quot;&gt;
- &lt;video src=&quot;http://vid.ly/4f3q1f?content=video&quot; controls&gt;&lt;/video&gt;
- &lt;div id=&quot;time&quot;&gt;&lt;/div&gt;
-&lt;/div&gt;
-&lt;script&gt;
- (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);
- })();
-&lt;/script&gt;</code></pre>
-
-<p><a href="http://isithackday.com/syncing-video/playfullsecond.html"><img src="timesecond.png" alt="Displaying the current time of a video"></a></p>
-
-<p>This you can use to trigger functionality at a certain time. For example you can do a <a href="http://isithackday.com/spirit-of-indiana/">Indiana Jones style animation of maps synced with a video</a>:</p>
-
-<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/KNNzP6fyOyQ?rel=0" frameborder="0"></iframe>
-
-<p>For a full explanation of this demo <a href="http://hacks.mozilla.org/2010/12/spirit-of-indiana-jones-syncing-html5-video-with-maps/">check out the blog post on Mozilla Hacks</a>.</p>
-
-<p>Let's have a go at something similar - a video that shows the URLs the presenter talks about. Check out <a href="http://isithackday.com/syncing-video/">this demo of a video of me explaining what we are doing here</a> with content showing and hiding at certain times in the video - make sure to jump around the video with the controls.</p>
-
-<p><a href="http://isithackday.com/syncing-video/"><img src="sync.png" alt="syncing video and content"></a></p>
-
-<p>We've covered already how to get the current time of a video in seconds. What I wanted now was to have a few parts of the web site that get hidden and shown during a certain time of the video. If video is not supported in the browser, <a href="allarticles.html">I just show all the content and have no syncing</a>.</p>
-
-<p>The first issue I wanted to solve was to allow the maintainer to say what should be shown when. Normally I'd use a JSON object in the JavaScript but I jumped my shadow and thought it would make much more sense to keep the maintenance in the markup itself.</p>
-
-<p>HTML5 allows you to store information in <code>data-</code> attributes. So, to make it easy to tell the script when to show what I just used <code>data-start</code> and <code>data-end</code> attributes defining the time frame on the articles I wanted to sync with the video:</p>
-
-<pre><code>&lt;article data-start=&quot;64&quot; data-end=&quot;108&quot;&gt;
- &lt;header&gt;&lt;h1&gt;Archive.org for conversion&lt;/h1&gt;&lt;/header&gt;
- &lt;p&gt;&lt;a href=&quot;http://archive.org&quot;&gt;Archive.org&lt;/a&gt; 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.&lt;/p&gt;
- &lt;iframe src=&quot;http://archive.org&quot;&gt;&lt;/iframe&gt;
-&lt;/article&gt;</code></pre>
-
-<p>You can try it out by <a href="https://github.com/codepo8/Syncing-Video">downloading the code</a> and changing the values (or use Firebug or Web inspector to change it on the fly).</p>
-
-<p>Here's the script that makes this happen (using jQuery): </p>
-
-<pre><code>/* if the document is ready... */
-$(document).ready(function(){
-
-/* if HTML5 video is supported */
- if($('video').attr('canPlayType')){
-
- $('aside::first').append('&lt;p&gt;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&lt;/p&gt;');
-
- 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 &gt; 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&lt;all;i++){
- if(t &gt;= timestamps[i].start &amp;&amp; t &lt;= timestamps[i].end){
- timestamps[i].elm.addClass('current');
- } else {
- timestamps[i].elm.removeClass('current');
- }
- }
- };
-
- };
-});</code></pre>
-
-<p>So, what's going on here? First we check if the browser is capable of playing HTML5 video by testing for the <code>canPlayType</code> attribute. If all is fine, we add some explanatory text to the document (which wouldn't make sense to have there if the browser didn't show a video). We define some variables we use and add a class of <code>js</code> to the root element of the document. this, together with the <code>.js article</code> selector in the CSS hides all the articles in the document.</p>
-
-<p>We then loop through the articles, read out the timestamps for start and end of each of the sections and store them in an array called <code>timestamps</code>. </p>
-
-<p>We then subscribe to the <code>timeupdate</code> event, round up to full seconds and call the <code>showsection()</code> function every new second.</p>
-
-<p>The <code>showsection()</code> function loops through all the timestamps and tests if the current time of the video is in the range of one of the articles. If it is, this article gets shown (by adding a <code>current</code> class) and all the others get hidden. This could get optimised by storing the current section and removing the class only from that element. </p>
-
-<h2>How about getting the same with less or no code?</h2>
-
-<p>If you like the idea of syncing content and video check out the <a href="http://popcornjs.org/">Popcorn framework</a> which is based on the same techniques shown here but gives you much more control over the video itself.</p>
-
-<p><a href="http://popcornjs.org/"><img src="popcorn.png" alt="popcorn.js"></a></p>
-
-<p><a href="http://popcornjs.org/butter/">Butter</a> is a point and click interface on top of Popcorn - it has a nice timeline editor that allows you to play a video and show all kind of web content at a certain time. You can export and send your creations to friends.</p>
-
-<p><a href="http://popcornjs.org/butter/"><img src="butter.png" alt="butter in action"></a></p>
-
-<p>With systems like Popcorn and Butter we are one step further to having authoring tools for the rich interactions HTML5 offers us.</p>
-
-<h2>Summary</h2>
-
-<p>Today we looked at how we can embed a video into a web document and how easy it is to make it interact with the rest of the document as the native video API gives us event handlers for changes in the video. Instead of trying to control the video we use the native controls and react to what is happening in the video itself. We used semantic HTML and data attributes to allow maintainers to use the syncing script without having to touch any JavaScript and we took a look at some services that make it easy to host and convert video.</p>
-
-<p>Having all these cool technologies gives us a lot of power but we can't just say "write some CSS/JS and HTML to use them". If we want open technologies to be a success we also have to make it easy for people to use them. The next step now is to move on from the "one-off implementations" phase and think about tooling and step-by-step code creation systems for users who want to use cool new technologies but don't want to spend too much time and effort on them.</p>
-
-<p>With native audio and video in browsers we've taken a massive step ahead to make the open web more engaging and beautiful. The next step will be to not only use multimedia for output but also as an input device. A lot of hardware these days comes with cameras and microphones - we need to start using and supporting open technology that allows us to use these as a way for our users to interact with our web products.</p>
-
-</body></html>
View
BIN article.zip
Binary file not shown.
View
BIN butter.png
Deleted file not rendered
View
BIN miro.png
Deleted file not rendered
View
BIN popcorn.png
Deleted file not rendered
View
BIN sync.png
Deleted file not rendered
View
BIN time.png
Deleted file not rendered
View
BIN timesecond.png
Deleted file not rendered
View
BIN vidly.png
Deleted file not rendered

0 comments on commit abe2d41

Please sign in to comment.