Video codec settings to support all major mobile devices in html5 player?

Question

Youtube mobile uses RTSP streaming, but thats rather overkill to set up and to maintain.

So it looks like HTML5 is probably the best way to serve videos embedded in websites to mobile devices. (Can I get confirmatino on that or does any one disagree?)

Also to include a static link to the media file so the phone can decide what to do with it and in edge cases download and start it with the system player, which seems to support more codecs and stuff.

The problem is the right video encoding.

I tried a lot and ended up with a video file that plays on Iphone 4, Iphone 3 with software upgraded and Android 2.1. Thats all I had available for testing.

To get it working at all the following seemed to be needed:

Format profile                   : [email protected]
Codec ID                         : avc1

The file also needed to be processed with qt-faststart (which i don't understand because it adds more to the requirements as by default in H264 specification the video information is encoded at the end of the file.)

I searched a lot but with no luck, so my question is:

What settings to choose to support the most possible devices with still good compression, quality and stuff.

Will I be good with H264 (AVC) or will it be necessary to support an alternate source with webm/ogg or something like that anyway?

Or in other words:

If you put a video online in HTML5 to be served to mobile devices. What codec settings would you choose and why.

I will open other questions which I will partly answer myself and link them here on how to do:

• a compatible html5 player
• do flash fallback or the other way round
• how to server side encode the videos correctly includign requirement installations and various input files

Hopefully in the end I will have my video website all set up and ready for mobile and a comprehensive guide for everyone to do it as well.

Answer 1

The recommended way to go is to encode your video 3 times:

h264, vorbis and webm ... then put them as sources into the html5 tag in this order (because some devices only look at the 1ŝt one) and if all fails fall back to flash.

I don't like that solution because i have 3 video files to encode and to store.

So i approached it the other way round to use flash if possible and switch to html5 as a Fallback. I prefer that solution as well as flash playback seems to be more reliable. Well it consumes more computing power so for HD videos you could debate but well.

So i ended up with the following table how stuff should be used:

IE: Flash (v9 will ship with html5/h264 support as well but flash is cool) Firefox: Flash (only theora/vorbis supported for now) Safari: Flash if possible, else HTML5 / h264 supported in versions 3.0+ Chrome: Flash, if flash not aviailable (unlikely) h264/html support in versions 5.0+ Opera: Flash (no support for h264 yet. Opera mobile... will not work. Html5 only with open formats.) Iphone: HTML5 / h264 (3.0+) Android: HTML5 / h264 (2.0+)

The only thing to watch out is that Android doesn't use flash because the mobile phone will not have the performance for smooth playback, but it supports it in versions 2.2 ... Still working on that.

So what do we need now?

Reliable Flash detection and JS. If no JS is available we can display. the html5 tag or the flash player .. i think flash player is better.

The only cases where Theora / Webm would be important are Firefox and Opera. But they should support flash which supports h264 scince version 9.something.

Answer 2

There is a bug with iPad reading the source which is highly documented. The mp4 has to be first.