I have been researching HTML video for quite a while and I am trying to find a version that works well across all browsers, so hopefully this will help someone else. I have been using crossbrowsertesting.com and literally testing this in almost every browser known to man. The solution I’ve got currently works in Opera, Chrome, Firefox 3.5+, IE8+, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8, and Blackberry Browser 9900.
Dynamically Changing Sources
I ended up putting the ogg as the first <source> because Mac OS Firefox quits trying to play the video if it encounters an MP4 as the first <source> (doesn’t follow the spec).
The correct MIME types are important .ogv files should be video/ogg, notvideo/ogv
If you have HD video, the best transcoder I’ve found for HD quality OGG files is Firefogg
The .iphone.mp4 file is for iPhone 4+ which will only play videos that are MPEG-4 with H.264 Baseline 3 Video and AAC audio. The best transcoder I found for that format is Handbrake, using the iPhone & iPod Touch preset will work on iPhone 4+, but to get iPhone 3GS to work you need to use the iPod preset which has much lower resolution which I added as video.iphone3g.mp4.
In the future we will be able to use a media attribute on the <source> elements to target mobile devices with media queries, but right now the older Apple and Android devices don’t support it well enough.
If your video is on a page that could be loaded using HTTPS or HTTP, avoid specifying a protocol in your URLs. For instance,