Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
178 lines (139 sloc) 7.89 KB


Presenting the first and only "proper" HTML5 <audio> and <video> fallback implementation: HtmlMedia

There are a few open-source HTML5 Video and Audio fallbacks that depend on Flash out there, but in-short, all were too heavy-weight AND not complete enough for my needs.

HtmlMedia was created with the term "progressive enhancement" in mind. The sad truth is that HTML5 isn't even finalized yet. None of the current browser's implementations have a uniform codec support, and Internet Explorer doesn't yet support it at all! This library aims to provide an implementation of the HTML5 media API, with a uniform, cross-browser codec set support via Flash, enhancing the browser's current implementation if one exists.

The HtmlMedia library should:

  • If no HTML5 media support is detected (IE8 and below, old versions of Firefox, Safari, etc.), implement the interfaces related to the <audio> and <video> element (HTMLMediaElement, HTMLAudioElement, etc.) via standard JavaScript, and provide playback support via the Flash fallback. Any Flash-related aspects should be abstracted away and it should seem as if the browser vendor decided to implement this part of the HTML5 spec themselves!

  • If some level of HTML5 media is supported, but not all codecs supported by the fallback are supported natively, then HtmlMedia should augment the native implementation to fallback to Flash when required completely transparently.

  • If HTML5 media is supported AND all the codecs that the fallback supports are also supported by the browser (not likely, consider FLV video files), then this library should detect so and do nothing.

  • When the Flash fallback must be used, it should integrate with the browser's native event firing model. In other words, the web developer still needs to determine whether to call attachEvent or addEventListener depending on the browser. This gives a better sense of nativity, and also ensures that it will work properly with other JavaScript compatibility libraries (i.e. Prototype's Event.observe).

  • As the fallback technology used is Flash, HtmlMedia can provide playback support for FLV files. This should be a standards compliant way to embed Flash video files via the standard <video> element. Possibly the new easiest way to include FLVs on your site?

Ultimately, this gives the web developer access to the HTML5 Audio and Video API on all browsers with Flash installed (~98%), with AT LEAST the codecs supported by the Flash fallback guaranteed to work, plus any other codecs that the web browser's implementation decided to implement.

Supported Browsers

I'll put this section first simply because I know that's what you're dying to drool about:

  • Internet Explorer 6+
  • Mozilla Firefox 2+
  • Opera 10.1+ (Possibly 10.0, definitely not 9 or below; no getter/setter support)
  • Testing for more needed!!

The browser requires at least the Flash Player 10 plugin installed to use for guaranteed codec support.

Supported Codecs

HtmlMedia guarantees that, using Flash as a backbone, you can use the HTML5 media API with the following codecs:

<audio>: MP3 and AAC (m4a) encoded audio files (Vorbis coming soon!) <video>: FLV and H.264 (mp4) encoded video files (Theora probably not coming...)

If the current browser has any others codecs supported via its HTML5 media implementation, then those are obviously still supported as well.

How to Use

HtmlMedia was designed to be a drop-in enhancement, with little or no configuration required by the developer. Here's a minimal HTML file, with guaranteed HTML5 media support via HtmlMedia:

<!DOCTYPE html>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript" src="HtmlMedia.js"></script>
    <audio src="theme.mp3" autoplay></audio>

You essentially need to copy the HtmlAudio.swf, HtmlVideo.swf,, swfobject.js and the HtmlMedia.js files to somewhere on your web server. On any page that you want to use HTML5 audio or video, just include the HtmlMedia.js script which will do the rest. Optionally you can set the path to the SWF files. HtmlMedia does not directly depend on any external libraries, but it is designed to work alongside popular JavaScript frameworks like Prototype.

Once the HtmlMedia.js file finishes loading you have access to the entire HTML5 audio and video API on your HTML page AND via JavaScript.

Try things like:

    //--> "probably"


var a = new Audio("theme.mp3");;
    // load and listen to some music :)
a.volume = 0.5;
    // set to 50% volume
setTimeout("a.pause()", 1000);
    // pause the sound in 1 second

You now have full access to the HTML5 <audio> and <video> API on your webpage, with a guaranteed codec set, and an implementation for old/non-supporting browsers!

If you would like some more tutorials on how to use the HTML5 Audio and Video API, I highly recommend reading any of the browser vendors' articles on the matter:

Known Limitations

I'm proud to say that the limitations brought on by this library are very minimal, and in any regular-use case, you likely wouldn't even know about them:

  • innerHTML - DO NOT create <audio> or <video> nodes via setting a parent element's innerHTML property. The newly created nodes will not be properly extended with the HTML5 API and fallback if you do! You can insert said nodes either via the initial HTML source, or dynamically via document.createElement or new Audio().

  • <source> - There's currently no support for the <source> element inside of media elements. This shouldn't be a problem, however, since HtmlMedia guarantees a baseline codec set. You should just set the src attribute on <audio> or <video> nodes; if the media is natively supported, it will be played via the browser, if not, then it will fall back to Flash.

  • controls - It's not possible to overwrite the functionality of the built-in browser controls for media elements. Furthermore, HtmlMedia has no plans on implementing the attribute. For these reasons, it is not recommended to use the controls attribute at all. However, all media events to build your own user interface do fire, and that is always recommended!

  • Currently, upgrading native <audio> and <video> nodes to use the Flash fallback is a destructive process. In other words, if an error event is fired, and it's src is a file where the Flash fallback needs to be used, then that media element is "converted" to a "fallback node" and from then on can only be used to play files supported by the fallback. Native playback is removed from that individual element. Just don't be reusing media elements if you're jumping between multiple file formats constantly is all, create new ones.


I've decided to release this enhancement library under the MIT license. See the LICENSE file for legal text.