Which video format(s) should a webapp serve?

Question

I need to put up a few videos on a Webapp and I'm a bit lost. My requirements are:

• DRM is not a concern at all
• it should work on the iPhone (and iPad) and on the main browsers (Safari, Internet Explorer, Firefox, Opera).
• it is not a problem at all if the video doesn't play on Linux (because it's a video/screencast of a Windows/OS X software targetted at, well, Windows and OS X users)
• it is not a problem at all if it also works on Linux (I'm a Linux user myself)

Can a unique format be served (like H.264) and play without any additional work on my part or do I need to convert the videos to different formats and have the webapp serve different video formats depending on the browser used?

Should I use the "video" tag of HTML5 when I detect an HTML5 capable browser?

What's the "safest" bet here? I take it that Flash is out of the equation seen that iPhone/iPad is a requirement.

Answer 1

In Chrome, Safari and IE9 you can use H.264 with the video tag.
In Firefox, Chrome (and Chromium) and Opera you can use Ogg with the video tag.
Flash will usually use H.264 (as far as I understand).

The video tag can also contain a source tag:

<video>
   <source src="video.mp4" />
   <source src="video.ogg" />
   <object ... ></object>
   Sorry, no video for you
</video>

In the above, the browser will try and see if it supports .mp4, if not it will try .ogg, if not it will try flash (works for older browsers too (IE6/7/8)) and if all fails it will just display a text.

In order for this to work you will have to either server video in both H.264 and Ogg or drop support for ogg and use H.264 and Flash.

Answer 2

There's this thing called video4all that lets you use the html5 video tag anywhere by falling back to flash when the browser doesn't support it.