Converting video for the web

Video formats and how they can work for you
Web Design Cardiff - Video
Web Design Cardiff – Video

Video containers & Codecs

Video files are not simple files. They are a combination of container formats and codecs.
Video containers act like a zip file – they contain encoded video data. The following are examples of popular video containers:

  • MPEG 4 (.mp4,.m4v) – The MPEG 4 container is based on Apple’s QuickTime container (.mov).
  • Flash Video (.flv) – This is used by Adobe Flash. Flash can now also play video in MPEG 4 format.
  • Ogg (.ogv) – Ogg is an open source video container natively supported in Firefox 3.5, Chrome 4 and Opera 10.5.
  • WebM (.webm) is a new container format. It is natively supported on latest versions of Chromium, Google Chrome, Mozilla Firefox, and Opera.
  • Audio Video Interleave (.avi) – A very old container format developed by Microsoft.

What is a video codec?

A video codec is an algorithm which encodes the video stream. The following are examples of video codecs:

H.264 is ideally suited to low bandwith, low CPU devices such as mobile phones. YouTube now uses H.264 to display its videos via flash video (.flv); YouTube also provides H.264-encoded video to mobile devices, including Apple’s iPhone and phones running Google’s Android mobile operating system. H.264 is popular but is patent encumbered which means not all browser like to use it.

Theora is a royalty-free codec and can be embedded on any container format.

VP8 was created by the creators of Theora. It has now been purchased by google and released as open source.

Doesn’t the HTML 5 video tag solve all this?

HTML5 includes a video element that can be used to embed videos into a web page. There is not specific video container or codec you have to use.

You can specify multiple video files and the browser will play using the first video file it has identified that it can use. Different browsers support different containers and codecs.

So what codec and containers are compatible with my browser?

  • Browser Ogg / Theora H.264 VP8
  • Internet Explorer Manual Install 9.0 Manual Install
  • Firefox 3.5 no 4.0
  • Chrome 3.0 No 6.0
  • Safari Manual Install 3.1 Manual Install
  • Opera 10.5 no 10.6

In summary to display a video on web page using HTML5 you would need to upload all 3 different video formats!

I just want to have one video file!

It is possible to use just one video file but you have to use a combination of html 5 and a flash player. H.264 codec in a MP4 container which plays using the video tag on modern browsers including the iphone / ipad and will fall back to Adobe Flash 9+ to play in other browsers.

So which is the best I hear you ask!

Short answer: H.264 codec in a MP (.mp4) container!

Try this video converter – it’s free and it mostly works 🙂

It some ways it’s quite basic, but that’s is also its beauty. If your client is looking for perfection, then this might not be for you. If they just want to upload a video of their office party and need to play it back on the iPhone, this is ideal!

Jordan Thorne
Creative Director
Service Tags

Related Blogs