Syncing Content With HTML5 Video

One of the main changes from HTML4 to HTML5 is that the new specification breaks a few of the boundaries that browsers have been confined to. Instead of restricting user interaction to text, links, images and forms, HTML5 promotes multimedia, from a generic  element to a highly specified and  element, and with a rich API to access in pure JavaScript.

Native multimedia capability has a few benefits:

• End users have full control over the multimedia.
  The native controls of browsers allow users to save videos locally or email them to friends. Also, HTML5 video and audio are keyboard-enabled by default, which is a great accessibility benefit.
• End users do not need to install a plug-in to play them.
  The browser already has everything it needs to play movies and sound.
• Video and audio content on the page can be manipulated.
  They are simply two new elements like any other that can be styled, moved, manipulated, stacked and rotated.
• You can build your own controls using HTML, CSS and JavaScript.
  No new skills or development environment needed.
• Interaction with the rest of the page is simple.
  The multimedia API gives you full control over the video, and you can make the video react both to changes in the video itself and to the page around it.

Let’s quickly recap how you can use native video in the browser, starting with the embedding task.

Embedding Video

This is old news. Embedding video in a document is as easy as adding a  element and pointing it to the source video. Adding a controls attribute gives you native controls:

1	<video src="chris.ogv" controls>video>

This is the theory, though. In the real world of intellectual property, corporate competition and device-specific solutions, we as developers have to jump through a few hoops:

01	<video controls="true" height="295" width="480">

02

03	<source src="chris.mp4" type="video/mp4">

04

05	<source src="chris.webm" type="video/webm">

06

07	<source src="chris.ogv" type="video/ogg">

08

09	Your browser does not support the video tag,

10	<a href="http://www.youtube.com/watch?v=IhkUe_KryGY">

11	check the video on YouTube

12

a>.

13

video>

This shows how we need to deliver video in three formats in order to satisfy all of the different browsers out there. There are a few ways to accomplish this. Here’s what I do…

Convert Video With Miro Video Converter

Miro Video Converter is an open-source tool for Mac that makes converting videos dead easy. Simply drag the video to the tool, select WebM as the output format, and watch the progress. A few other converters for Windows and Linux are available, too.

Hosting And Automated Conversion On Archive.org

Because I license my videos with Creative Commons, I can use Archive.org to both host the videos and convert the WebM versions to MP4 and OGV. Simply upload your video and wait about 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).

You can use Archive.org to both host the videos and convert the WebM versions to MP4 and OGV. Large view.

Industrial-Strength Conversion With Vid.ly

WebM, OGV and MP4 take care of only the major browsers, though. If you want to support all mobile devices, tablets and consoles and you want the video quality to adapt to the user’s connection speed, then you’ll have to create a few dozen versions of the same video. Encoding.com feels our pain and has released a free service called Vid.ly, which converts any video you upload into many different formats more or less in real time. Unfortunately, the service is in private beta at the moment, but you can use the invite code HNY2011.

Vid.ly converts any video you upload into many different formats more or less in real time. Large view.

Furthermore, Vid.ly creates a URL for your video that automatically redirects the browser or device calling it to the right format. This keeps your embed code as simple as possible:

1	<video src="http://vid.ly/4f3q1f?content=video" controls>video>

Cool, isn’t it?

The Power Of The HTML5 Video API: Syncing Content

Now that our video is on the page, let’s check out the power of the API. Say, for example, you want to know what part of the movie is playing right now. This is as simple as subscribing to an event of the element:

01

"stage">

02

03

"time">

04

05

If you try this out in your browser, you will see the current time below the video when you play it.

You will also see that the timeupdate event gets fired a lot and at somewhat random times. If you want to use this to sync the showing and hiding of parts of the document, then you’ll need to throttle it somehow. The easiest way to do this is to limit the number to full seconds using parseInt():

01	<div id="stage">

02	<video src="http://vid.ly/4f3q1f?content=video" controls>video>

03	<div id="time">div>

04

div>

05

<script>

06	(function(){

07	var v = document.getElementsByTagName('video')[0]

08	var t = document.getElementById('time');

09	v.addEventListener('timeupdate',function(event){

10	t.innerHTML = parseInt(v.currentTime) + ' - ' + v.currentTime;

11

},false);

12

})();

13

script>

You can use this to trigger functionality at certain times. For example, you can sync an Indiana Jones-style animation of a map to a video: