Encoding Video for Websites

These days there are many more web browsers in active use which are running on different devices. It is important to design and develop websites which are going to work on the majority of these platforms. HTML5 has many new offerings which intend to address many cross-comparability issues, and web browsers have been quite fast the uptake of this standard.

Despite this, there still isn’t a single video encoding which will work across the board (without additional components). I have been reading into this over the past few weeks and stumbled upon a solution. Video which is encoded as MPEG4 AVC (the H.264 codec) will play on just about everything except Mozilla Firefox. But, not to fear because there are Adobe Flash files which are able to stream H.264 encoded videos. So the idea is to utilise HTML5 H.264 video support for all browsers possible, and then fall back to Flash for other browsers.

This approach also means that video will play on devices like the Apple iPad.

When encoding video I found the following configurations to offer sufficient quality results at acceptable file sizes. I found this to be a process of trial and error to find something which was actually going to play smoothly at a good quality for my client.

  • Frame Rate: 25 fps
  • Video Bits per Second: between 300 Kbps and 1500 Kbps (Depending upon quality)
  • Audio Bits per Second: Either 128 Kbps or 256 Kbps