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 Andriods.

Browser support (using H.264)
•Safari: native HTML5
•Chrome: native HTML5
•Internet Explorer 9: native HTML5
•Internet Explorer 6,7,8: Silverlight/Flash
•Firefox: Silverlight/Flash
•Opera: Silverlight/Flash
•iPhone, iPad: native HTML5
•Andriod: native HTML5

   
 
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>