Hosting video files using HTML5: advice?
 

Having just looked at the HTML5 video compatibility table on wikipedia, it would seem that HTML5 video has a big problem: Namely that there is no single video format supported by all major browsers.

There is a secondary problem: That a significant fraction of web browsers currently in use do not support HTML5. I've got Firefox 8 right now and It doesn't support quite a few features -- notably mpeg4 and h.264. The situation looks pretty grim.

Does anyone have advice about handling video in HTML5 rather than Flash? I'm inclined to either use Flash (again) or rely on Youtube or Vimeo for hosting my video.

Actually, it looks like only one major browser company, Microsoft, has a philosophical problem with supporting multiple codecs, because apparently they are concerned about the poor customer getting tied up by intellectual property rights!

So yes, you have a quandry; you have to predict the future of that browser.

But for now, if you want to support all the major browsers, you have to serve the video in multiple codecs, or provide both html5 and flash (as youtube does), or do flash only, or use a third party host who does one of these for you, or put up an annoying message saying 'please upgrade your browser'.

thx, neonsignal.

I don't think M$ is entirely to blame here. According to the compatibility table, Firefox doesn't support H.264 or MPEG-4 and Safari only supports H.264 and Chrome is going to remove H.264. And publishing 4 different video formats for every video is just STUPID.

Any tips on how to detect video support for a given browser via Javascript so that I know when to put up that 'please upgrade' message? Seems to me like I'll have to manually maintain a database of browser video support and that this database is likely to change frequently.

You shouldn't use a browser database, because this will fail for people who have manually installed plugins, or who run a browser that isn't in your database.

You can just put up multiple source statements inside the video tag, and let the user agent decide. You can also listen to the error event (MEDIA_ERR_SRC_NOT_SUPPORTED) on the last source element with a script, and decide what to do then. You might also be able to use the 'canPlayType' method. The W3C page has some details http://www.w3.org/TR/html5/video.html.

I don't know why you would need to have four codecs; either VP8 or Ogg Theora coupled with H.264 would cover all the bases. Of course, if this is a commercial project, you may need to pay royalties to encode the H.264 versions.

Thanks for the seriously good info.

All the bases? Android? Blackberry?

ROYALTIES? grrrr. Define "commercial?"

In this case, video that is not "free to end users" or is not distributed over the internet.

Both of these support HTML5 to some extent (Blackberry using Webkit). Not sure how well it works, but I think you will find that codec-wise recent Android versions support VP8, and Blackberry supports H.264. Though you will need to be careful about encoding specifics if you are planning to support these lower end devices.