1. Basic Principles
  2. Recommended codecs
  3. Encoding software
  4. Mobile video
  5. Which videos should be re-encoded

Basic Principles of Encoding Video for the Web

When encoding for the web, don't forget you always remain reliant on both the outgoing bandwidth of your server and the incoming speed of your viewer's internet connection. The smaller you can make your files, the higher your chances for smooth playback.

Aiming for perfect playback quality can only result in choppy video. The first place to cut back on file size is with resolution. The less pixels you have to compress, the smaller your file. There's no point in making your video larger than the device window. The first two generations of iPads had only 1024 x 768 screens. The most they need is 960px x 540px. Once you've picked the right target size - do your viewers really need to see you speak in 1080p full HD or even 720p's 1280 x 720 pixel - the next big hurdle is bitrate. You want to set bitrate as low as possible while maintaining quality.

  • What bitrate to use depends on size and on content. High motion scenes require much higher bitrates not to tear. VBR (Variable Bit Rate) was set up to deal with these issues. VBR takes longer to encode but produces cleaner results. VBR is most commonly used for http delivery if video content (http progressive).
  • On the other hand, do not use Variable Frame Rate. It will break your video on most devices or platforms. Always choose Constant Frame Rate.
  • If the input video is interlaced, apply a deinterlace filter before encoding.
  • If the input video does not have a sample ratio of 1/1 (square pixels), please apply a filter enforcing a sample ratio of 1/1.

If your original video has an aspect ratio of 16/9 and keeping the above caveats in mind you could encode to:

  • a resolution of 960x540 pixels
  • an average video bitrate between 1500 and 4000 kilobits per second
  • an average audio bitrate between 96 and 192 kilobits per second

To get your video looking its best on the web, you'll need to experiment with encoding settings until you get it right for your particular material. We recommend you create a short clip with different short samples of your source material to test until you get it just right. At the bottom of the article, we'll give you some screenshots of what we consider to be good settings for Handbrake. You can use them for other software as well. Don't forget to turn on 2-pass encoding while almost always give better results for just a bit more time spent encoding the first time.

Codecs

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

Container video codec audio codec
MP4 H.264 aka MPEG-4 AVC or MPEG-4 Part 10 AAC
WEBM VP8 Vorbis
OGG Theora Vorbis

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 playback failures encode to the more modern MPEG-4 AVC.

Ogg video

Really not required. 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. One less thing to worry about unless you happen to have a lot of out of date Firefox and Opera users. Hint: such people are probably not watching much video on the web and have other browsers or flash for that. We've got you covered without Ogg but if Ogg suits your particular application, FV Flowplayer 5 plays Ogg perfectly.

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 for the widest audience including viewers with iPhones and iPods and iPad generation 1 as well as older iOS versions you should stick with:

  • Baseline Profile
  • Level 3.0
  • 1 reference frame
  • Maximum bitrate limited to 1.5 times the average bitrate, but not over 10000 kilobits per second.
  • Buffer size of 5 times the maximum bitrate, but not over 10000 kilobits.
  • Maximum resolution of 640x480 px

Encoding software

While much of the best free software is based on the open source FFmpeg program, we recommend using a graphical frontend for FFmpeg, like Handbrake (Windows, Linux, OS X) or ffmpegX (for OS X). There are high priced transcoding programs around which are often very capable, but which you probably don't need for basic web encoding.

Here are some screenshots with recommended settings.

WEBM encoding sample

[screenshot from Handbrake] 
 

MP4 encoding sample

handbrake safe iPhone3GS iPad settings HQ
handbrake safe iPhone3GS iPad settings HQ

These settings play perfectly on iPad generation one as well as older single processor Android 2.3.3 Gingerbread telephones like the HTC Desire. And they look good on desktop. You can save substantial space and get a faster start by lowering the bitrate but if you do so, picture quality degenerates rapidly. Profile High and H.264 Level 4 give better looking video at lower bitrates but will be very jumpy on older/weaker Android phones or older iOS devices (iPhone 3GS, iPad 1). The settings above are the safe ones for a single codec across different devices.

Pay attention to audio tab too! Set it to use AAC, make sure it's not "Auto Passthrough". That way the audio stream won't be re-encoded and your video might not play in Internet Explorer.

handbrake audio encoding
Selecting the right audio stream Codec

Mobile Video

iOS on older iPhones for older devices has a resolution limit of 640x480 px and also the connection speed is also a problem. Old Android phones (like HTC Legend) can only play videos up to 480x320 px.  

  1. You need to first encode your video for mobile:
    • in the lower resolution and lower bandwidth (you can just set the width to 480px to make it load faster on mobile connection)
    • make sure you use the "baseline" h264 profile
  2. Then use "mobile video" field of our plugin. Enable it in Settings -> FV WordPress Flowplayer -> Post Interface Options. Then in the shortcode editor you will get a special field for mobile video.
  3. That video will be served for each device with screen width lower than on equal to 320px and height lower than on equal to 480px. Even if the later iPhones' screen is in reality 640x960px, it's true size is calculated as 320x480px as it's the so called "retina" display.
  4. So you can test that out on desktop too by sizing down the browser window. This is done in JavaScript, so you don't have to worry about WordPress page cache.

More about Video Formats

Currently 3 major video formats are used on the web.

  1. MP4 gives complete cross browser support with the aid of Flash
  2. WEBM gives HTML5 video support for the latest Firefox, Chrome and Opera browsers
  3. OGG gives HTML5 video support for older versions of Firefox and Opera

FV Flowplayer 5 also supports HLS (Apple HTTP Live Streaming) from M3U8 files.

Browser ogg mp4 webm m3u8
IE - 9.0 - -
Firefox 3.5 - 4.0 -
Chrome 3.0 3.0 6.0 -
Safari - 3.1 - 6.0
Opera 10.5 - 10.6 -

Taken from Wikipedia.

By default FV Flowplayer 5 attempts to use HTML5 video, and if it's not supported then Flash (9.0+) and MP4 is used. MP4 is enough for complete browser support, but providing WebM and/or OGG video gives you broader support for HTML5 video which is the preferred technology. Also note that Flash does not support byte-range requests, therefore random seeking will not work with MP4 in Flash mode.

Note that browser support of video formats is subject to changes - Chrome is planning to remove MP4 support, and Firefox is planning to add MP4 support. Your best bet for reliable HTML5 video is to provide MP4 and WEBM variants for each of your videos.

Safari on Windows is capable to play HTML5 video when QuickTime is installed.

HLS support so far is confined to on-demand streams because of the lack of HTML5 live video alternatives.

Which videos should be re-encoded for best compatibility with HTML5?

FLV

This format only plays on Flash-compatible devices. So make sure you include another version of the video in MP4 format for all the iOS devices and other people without Flash.

MOV

Since MOV format is not officially supported by HTML5, we recommend that you re-encode these videos into MP4.

MOV sometimes contains codec combinations that are not supported across all browsers. MOV videos don't always play in all versions of Google Chrome web browser, even if plays fine in all your other browsers. We continue to do active research into Google Chrome video quirks as Chrome/Chromium appear to be the most problematic with MOV and MP4 videos. Fallback to WebM might help. We will be doing our own tests. If anyone has specific insight, by all means get in touch right away.

RTMP

RTMP is not a format, but a protocol for effective video streaming of Flash video. It only works on Flash-compatible devices. Make sure you include another version of your video in MP4 format for all the iOS devices and other people without Flash.

3GP

This is a special case - it probably will play on iDevices, but won't play in normal computer browsers if Flash is not installed, with exception of Safari.