I believe the easiest thing to do is use a flash player which can show mp4 video. That way you cover pretty much all browsers on the market. If they can't use flash (iPhone & iPad) they have support for the video element and mp4 video format.
The basic approach would be to use an object and fallback to video. Using a video element with object fallback doesn't work in Firefox. However, IE8 refuses to do anything with with the object unless type="application/x-shockwave-flash" is present, at least unless the activex related classid is present, which in turn screw things up for Firefox (which would then need an embed element).
However, if I deactive flash in Safari, Safari actually still doesn't disregard the object element entirely and uses its nested video element. I don't know wether that's by design or a bug due to that Safari would have been able to handle the object mime type if the flash plugin wasn't disabled. As such, I don't know if this will work without further modification on iPhone / iPad. But it's worth a try.
<object width="400" height="300" type="application/x-shockwave-flash" data="http://example.com/yourplayer.swf?movieURL=http%3A%2F%2Fexample.com%2Fpath%2Fto%2Fmovie.mp4&autostart=false">
<param name="movie" value="http://example.com/yourplayer.swf?movieURL=http%3A%2F%2Fexample.com%2Fpath%2Fto%2Fmovie.mp4&autostart=false">
<video controls="controls" width="400" height="300" autostart="false">
<source src="http://example.com/path/to/movie.mp4" type="video/mp4" codecs="H.264, avc1.42E01E, mp4a.40.2"></source>
</video>
</object>
If the presence of the application type attribute for the object poses problems for iPhone / iPad, you might initially just show the flash players and have a javascript onload event handler to replace them all when something like this is true
var v = document.createElement('video');
if (v && v.canPlayType && v.canPlayType('video/mp4'))
It's also worth noting that for some reason Safari doesn't handle a p fallback element after the video element above. I.e.
<object ...>
<param ...>
<video ...>
<source src="playable by safari">
</video>
<p>Your browser can't play this video</p>
</object>
shows both the video element and the p element with flash plugin disabled, but not when it's enabled. I would have expected it to stop checking content after the video element was ok to display.
