Html5 Video and Flash Approach

Question

Looking into HTML5 video tag, and researching which browsers support which video file types, and my initial thought is things just got harder than just using flash.

I am wondering if there is some skeleton code (combined with development approach for videos) that someone has figured out to do the following:

If flash is available, use it
If not, try html5 video ogg format
If that doesn't work, try html5 video h.264 format
If that doesn't work, try html5 video webM format

Based on what I am seeing, am I correct in thinking that now, in order to accommodate all users on all browsers, a video needs to be published in 4 formats? If so, this HTML5 video thing is an epic fail!

Anyway, any ideas, processes, links to libraries, etc are appreciated.

Thanks -

+1 for epic fail. Until the video patent mess is sorted out, it's a big PITA — spender

vbence vbence · Accepted Answer · 2011-04-29T14:44:38

It's not that hard. You can give multiple sources (in multiple formats) for a single <video> tag.

<video width="320" height="240" controls>
  <source src="pr6.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>

Also the better choice is to search for native html5 video first, then fallback to flash.

The two fromats you need are WebM (royaltiy free, supported by alternative briwsers Mozilla, Opera, Chrome and others) and H.264 for the big ones (IE and Safari). Your fallback option (flash) is also able to play H.264.

I suggest reading this guide if you haven't already.

Edit:

If you're looking for the lowest common demoninator then it's surely hinted H.264 over HTTP. Flash can play it without a media server and it's the only format iOS supports anyway, so you are OK for one single format for the time being.

But even with this single format you can support HTML5-bsed playback on the two factory teams (Safari and IE). I know the video tag is kinda new but they build on solid foundations in the OS's. Even at this state they are a better option than Flash.

So the real dilemma after all is ith the alternative browsers. You can use two formats instead of one (to throw in WebM) or you only stay with H.264 and use Flash on non-h264 browsers.

This is rather a question of personal preference (and the cost of double storage). But storage is generally free these days, bandwidth is the real cost factor anyway.

Html5 Video and Flash Approach

2 Answers