You could use jQuery to check browser and load best format only...
I consider webm is better for Firefox or Chrome.. For anything else, you can use mp4.
Just like this :
Your HTML :
<video id="frog" loop autoplay ></video>
Your JS :
$(window).load(function(){
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_firefox || is_chrome){
// for firefox or chrome, webm is better
$("#frog").attr("src","http://www.ellevation.com.au/sanli/wp-content/uploads/2014/04/testvid_VP8.webm");
}else{
$("#frog").attr("src","http://www.ellevation.com.au/sanli/wp-content/uploads/2014/04/testvid_x264.mp4");
}
});
An example here.
Edit : (september 2014)
It seems that Firefox no longer supports webm format on html5 video.
Best solution seems :
HTML :
<video controls>
<source src="oggVideoPath.ogv" type="video/ogg">
<source src="mp4VideoPath.mp4" type="video/mp4">
Your browser doesn't support <code>video</code>.
</video>
And BEST SOLUTION to correctly encode mp4 to Ogg Theora is :
http://v2v.cc/~j/ffmpeg2theora/
very easy to use, install it and just write this command line : ffmpeg2theora mp4VideoPath.mp4