Video on websites and mobile device, is there one cross-platform code/format for all these support?

7
votes

I have to manage a website which will display mainly videos. This website will have a mobile version with < video > tag, so that the video can also be played on ipod, iphone, ipad, and other mobile devices, in their browser.

The question that I now have is: which format/codec choose to convert the videos, for having the best workflow?

The perfect solution would be to find a format that can be played in both flash and < video > players, so that my client hasn't to export the videos in several files.

For the Flash, I would use .flv file, with h264 codec. But that format/codec can't be played with < video >, isn't it?

If not, is there a format/codec combination that could work on both?

If always not, what may I do? Have a .flv/h264 file for the web version, and a .ogg/webM file for the mobile version?

Thank you in advance for your precious advises!

2
flashhtmlvideo-encoding
H.264 in a MP4 container vill work in both Flash Player and iOS (and in Safari on the Mac). You don't have to use .flv files for Flash. But there's no one format that will work in the video element in all web browsers. Ogg or webM won't work on iOS devices, as far as I know. – Lars Blåsjö
Ok great, thank you for your answer! I also just read diveintohtml5.org/video.html, which brought me to the same conclusion. – daviddarx
So, if I use, mp4 with h.264 and aac codecs, I'll be able to display video everywhere where flash can be installed (all browsers on computers), and on all iOS devices, and Android devices! Sounds perfect for me. Is that enough for a video platform, or may I use multiple files? – daviddarx
diveintohtml5 URL has changed (been mirrored) to diveintohtml5.ep.io @daviddarx – DanBeale

2 Answers

3
votes

I think this is a pretty good article concerning HTML5 Video: http://diveintohtml5.ep.io/video.html

Codecs/container    IE  Firefox Safari  Chrome  Opera   iPhone  Android
Theora+Vorbis+Ogg   ·   3.5+    †       5.0+    10.5+   ·       ·
H.264+AAC+MP4       9.0 ·       3.0+    ·       ·       3.0+    2.0+
WebM                9.0 4.0+    †       6.0+    10.6+   ·       2.3‡

According to this article there is no format that works everywhere. What i do is, i encode the videos in H.264. So it works natively on the iPhone, iPad and in safari and for all the others i simply read the mpg file with a flash player as fallback. (You can directly link to a mp4 file with flash, you don't need to use a FLV file).

To do so you can use Modernizr to detect if HTML5 is supported and if it is, what formats the browser supports.

Of course it would be better to have all tree formats available, but its often to complicated to handle for the client.

1
votes

Here's what is common across Android, iOS and WP8, Mac and Windows:

Container Type - MP4, M4V

Encoding Type - H.264 video, up to 1.5 Mbps, 640 by 480 pixels, 30 frames per second, Low-Complexity version of the H.264 Baseline Profile with AAC-LC audio up to 160 Kbps, 48 kHz, stereo audio