Video encoding

Table of contents

General advice

Always bear in mind that encoding for delivery over the wire differs fundamentally from encoding for a desktop viewing program. Your content has to pass through the needle hole of a connection whose speed is not under your control.

The results will and can only be a compromise between desired quality and delivery speed achieved by lossy compression. Moreover they will vary depending on the content of the original. A simple headshot is way more compression friendly than a movie containing high motion scenes and/or pan shots. You have to decide on which side of the scales you make more sacrifices, also in view of your target audience and the assumed speed of their connections.

  • Be extremely miserly about bitrate and dimensions! Downscaling is a waste of resources and often a video in the dimensions of the player container element on the page displays reasonably well in fullscreen too.
  • Encode to a constant frame rate. Variable frame rate will break playback in various scenarios, depending on engine, browser or platform.
  • If the input video is interlaced, you should apply a deinterlace filter.
  • If the input video does not have a sample ratio of 1/1 (square pixels), you must apply a filter enforcing a sample ratio of 1/1 because some versions of Internet Explorer cannot handle anamorphic MP4 and Flash is agnostic of display aspect ratio, knows only about width and height.

Assuming your original video has an aspect ratio of 16/9 and keeping the above caveats in mind you should aim for:

  • a resolution of 640x360 pixels
  • an average video bitrate between 400 and 1000 kilobits per second
  • an average audio bitrate between 40 and 80 kilobits per second

Take your time to try out various encoding settings on a small sample representative of your content. Good transcoding programs offer a constant quality switch. Try it and inspect the resulting bitrate. For the final encode use 2-pass encoding which distributes the bitrate better while keeping a good quality balance.

Codecs

MP4, WEBM and OGG are the containers for the following video and audio codecs:

We did not cover the MPEG-4 Visual or MPEG-4 Part 2 video codec because it is not suitable as Flash fallback and will also not play in Internet Explorer in HTML5 mode. To avoid bad surprises encode to the more modern MPEG-4 AVC.

Ogg video

Unless you want to cover all your bases, consider omitting it. Except for a few corner cases concerning older browsers where you can failover to MP4 playback in Flash mode, either WEBM or MP4 will do the job as well, and better.

MP4 and metadata

H.264 encoded videos carry their metadata — duration, frame rate etc. — in the so called "moov atom".

By default encoding programs will insert the moov atom at the end of the video file which is suitable for playback of a local file in a desktop program. However, any kind of progressive download requires the metadata to be available right away for immediate playback. Otherwise the player has to wait for the entire video to be downloaded before playback starts.

Make sure to select an option in your transcoding program which puts the moov atom at the beginning of the file!

In case you already have a lot of MP4 videos with the moov atom at the end of the file, use a dedicated program such as QTIndexSwapper or MOOV Relocator to move it to the beginning.

MP4 for iOS and mobile devices

MPEG-4 AVC is a powerful codec which allows very effective compression at various profiles and levels. As higher profiles and levels are decoding intensive, they are not supported by mobile devices to ease their processor workload.

Let's take iOS as an example: Even the latest iPads will only play videos encoded at H.264 Main profile Level 3.1. But if you want to cater safely for the widest audience including viewers with iPhones and iPods and older iOS versions you should stick with:

  • Baseline Profile
  • Level 3.0
  • 1 reference frame
  • Resolution of maximum 640px width and maximum 480px height

Encoding samples

To give you an idea to what the above considerations lead we choose the commandline syntax of the FFmpeg program - there are also graphical frontends for FFmpeg, like Handbrake or ffmpegX (for Mac OS). There are many other transcoding programs around, and you should of course choose one you feel most comfortable with. Be aware though that often the quality of the program is directly proportional to its learning curve. It's also recommended to use the very latest version of the respective program because development in this area is moving fast.

In the following replace x in -pass x with 1 and 2 for the first and second pass/run respectively. We assume the original movie in.suffix has an aspect ratio of 16/9 and a frame rate of 25 frames per second.

WEBM encoding sample

ffmpeg -y -i in.suffix \\
       -filter:v scale=640:360,setsar=1/1 -pix_fmt yuv420p \\
       -vpre libvpx-720p -b:v 500k -r:v 25/1 -force_fps \\
       -c:a libvorbis -b:a 80k -pass x out.webm

MP4 encoding sample

ffmpeg -y -i in.suffix \\
       -filter:v scale=640:360,setsar=1/1 -pix_fmt yuv420p \\
       -c:v libx264 -preset:v slow -profile:v baseline \\
       -x264opts level=3.0:ref=1 -b:v 700k -r:v 25/1 -force_fps \\
       -movflags +faststart -c:a libfaac -b:a 80k -pass x out.mp4

Disclaimer: The above commandlines are very basic, and the syntax may differ in older FFmpeg versions. This cannot be the place for detailed information on how to handle the transcoding program(s) of your choice. Please consult the respective manuals, online documentation or mailing lists for in-depth advice regarding your transcoding software.

Results