HTML5 Video Tag - Best Video Formats to Use

Question

For use in a HTML5 Video tag, I recently converted some videos from the following format:

Duration: 4:40
Video: H264 640x360 16:9 4982Kbps 23.98fps
Audio: AAC 44 KHz 255 Kbps Stereo

To the following three formats (to increase compatibility across all devices):

Type: MP4 (56,018 KB)
Video: H264 640x360 16:9 1481 Kbps 23.98 fps
Audio: AAC 44 KHz 152 Kbps Stereo

Type: OGG (58,025 KB)
Video: THEORA 640x360 16:9 1398 Kbps 23.98 fps
Audio: VORBIS 44 KHz 240 Kbps Stereo

Type: WEBM (57,471 KB)
Video: VP8 640x360 16:9 840 Kbps 23.98 fps
Audio: VORBIS 44 KHz 840 Kbps Stereo

I am having a lot of issues with it taking a long time to buffer, and even when it does play, it is jumpy or seems to skip frames. On mobile devices, it is even more painful.

Can someone knowledgeable with optimal video formats let me know if I am doing anything wrong, and if so, what should I be doing to fix it? Is it just that they are just too big even?

Thanks!

Answer 1

There is no "best" video format since not all the browsers are compatible with all the video formats on all platforms.

edit 2013-12: Seems MPEG-4/H.264 is beating out the competition; only major holdbacks are Firefox on OSX & SOME Linux, Opera, & Android less than v4.4 works only if you format it a certain way http://caniuse.com/#feat=mpeg4

Also: http://caniuse.com/#feat=ogv | http://caniuse.com/#feat=webm | my other post with better fallback