HTML5 and Timed Media


I recently gave an informal talk about HTML5 and timed media at the Portland Javascript Admirers April meeting. It’s fun looking at what browsers can/will be able to do but hurts to think about having to continue support for older browsers. HTML5 tags for smart browsers, Flash for not smart? Gross.

Slides are here. Mostly showcases demos published elsewhere, but here’s two I put together. You’ll need the at least Firefox 3.5 (3.5 is currently beta release) as these demos don’t make any browser support checks.

Video Captioning

Video Captioning Demo

Accessibility is important making providing alternate media to video and audio important. This demo inserts a video with the video tag followed by a list containing captioning. A title attribute on each list items holds a number corresponding to the time in the video that text is spoken. Using the timeupdate event along with the currenttime property, the list item tied to that time in the video is displayed.

This is done in an expensive manner for this demo by looping through the title attribute of all list items. This isn’t likely to scale well. A better approach would be to create an index to reference.

Sprite Synth

Sprite Synth Demo

Using sprites for images with CSS is a popular and efficient way of rendering graphics. I was hoping to make this concept work with audio too: a single audio file containing different samples shifted around to different times to play a specific piece when requested. Unfortunately, it didn’t work out that well. Seems the seek latency is too high.

The synth demo also uses title attributes to convey the requested time. When a key is clicked, this attribute is passed to a function which sets the currenttime of the audio file. A listener on seeked then plays the file once the new currenttime is reached.

Take away

I also showed some examples of what can be done now with audio and video in Flash and using JS interfaces with Flash. While there is more versatility for experimental and rich interfaces, the audio and video tags shine in cases where a simple player is required. No plugin dependencies. Native support. Just like adding an image tag.


  1. John Dowdell 20090429

    “No plugin dependencies.”

    But significant browser dependencies. Do you see a way it could be practical to use?

    tx, jd/adobe

  2. waytoocrowded 20090429

    It’s fun looking at what browsers can/will be able to do but hurts to think about having to continue support for older browsers.

    So no, not today, probably not tomorrow, but eventually, yes. Lack of browser support is the biggest drawback which I didn’t do good job of mentioning in this post. Additionally, javascript needs to be enabled but that’s often the case with how Flash video/audio is embedded as well so seems less of an issue.

Skateboards and bikes are better at nights

Skateboards and bikes are better at nights. 0 comments.

Search WayTooCrowded
The Header Should Always Point Home