mediaelement.js

The Problem

• <video> doesn't work in old browsers
• Browsers support different video codecs
• Browsers have inconsistent player UI
• H.264 doesn't work in Firefox & Opera Note: MediaElement.js also supports Ogg and WebM (even FLV and WMV) if you want to use multiple <source> elements

The Solution: MediaElement.js

You use the <video> tag with one H.264 file (you can also include Ogg or WebM, but you don't need to). If the browser doesn't support it, then MediaElement.js replaces <video> with either Silverlight or Flash and returns a wrapper object that matches the HTML5 Media Element API. This lets you code to MediaElement.js as if it were a native <video>.

Better Still: MediaElementPlayer.js

MediaElementPlayer.js uses MediaElement.js and jQuery to build the complete working player you see here. The same HTML/CSS controls show up for everyone on any browser with any media type (use a single H.264 or include WebM, Ogg, WMV, FLV). It even works on iPhones, iPads, and Androids.

Browser support (using H.264)

• iPhone, iPad: native HTML5
• Android: native HTML5
• Safari: native HTML5
• Chrome: native HTML5
• Internet Explorer 9: native HTML5
• Internet Explorer 6,7,8: Silverlight/Flash
• Firefox: Silverlight/Flash
• Opera: Silverlight/Flash
• (Add OGG or WebM for native HTML5 in Firefox and Opera)

The Code

<script src="jquery.js"></script>
<script src="mediaelement.js"></script>
<script src="mediaelementplayer.js"></script>
<link href="mediaelementplayer.css" rel="Stylesheet" />

<!-- Preferred: Use one H.264 file for everyone (with silverlight fallback) -->
<video src="myfile.mp4" type="video/mp4" width="640" height="360"></video>

<!-- OR use multiple codecs, your choice -->
<video width="640" height="360">
	<source src="myfile.mp4" type="video/mp4" >
	<source src="myfile.ogg" type="video/ogg" >
	<source src="myfile.webm" type="video/webm" >
</video>

<script>
jQuery(document).ready(function($) {
	$('video').mediaelementplayer();
});
</script>
			

More info

• In the wild: DTS Online Education, DTS media
• Background: Echo conference session with Nathan Smith (slides)
• WebM/VP8 support coming soon (when Flash supports it). FLV supported via Flash. WMV supported via Silverlight.

Download the Goods

MediaElement.js is GLPv2/MIT licensed. Use it everywhere and be good.