Web Video Compression

Video formats

There are several interesting, high-quality video options available online. If you don’t know which one to use, here’s a helpful chart to compare and contrast.

Player	Market Share	Player Size	Supported Codecs
Flash Player 9	96%	2MB	VP-6
Windows Media Player 9	79%	7 MB	VC-1
Flash Player 9 r115	74%	2MB	VP-6, H.264
Quicktime Player 7	66%	53MB	H.264
Microsoft Silverlight 1	20%*	2 MB	VC-1
* Estimate based on LongTail Video server logs, July 2008.

As you can see, Flash has the highest market share, installed on 96% of all computers. Windows Media Player is also widely installed, but not available for Macs. Microsoft’s Silverlight player was designed to fill that void.

The file sizes of all the players are very similar, except for QuickTime, which is quite large as it includes iTunes and requires a manual download.

Video quality of each format varies widely, but the players listed here all have a top-notch option. Both QuickTime and Flash 9r115, include the industry-standard H.264 video codec (usually in .mp4 or .mov files). Windows Media Player and Silverlight use the equally impressive VC-1 video codec (.wmv files). Even the slightly older VP6 codec (.flv files) used in Flash Player 9 offers excellent video quality. For an in depth comparison of these codecs, check this article.

There are many video formats not listed here as their quality cannot be compared against the options listed above. Notable, the older Sorenson Spark codec for .flv files is still used quite often (e.g. YouTube). This codec is also found in most freeware / shareware software that encodes FLV. However, its quality is greatly inferior to the newer-generation codecs like H.264, VC-1 and VP-6.

An advantage of the H.264 codec is that it is also used in a lot of portable devices, such as the iPod / iPhone, PlayStation portable or Nokia N-series smart phones. If you encode in H.264, you can deliver your content to these devices, too.

Compression software

Most compression software was traditionally desktop-based, but now online services offer better solutions at lower prices. Some are hosted, meaning you can upload videos manually or through an API. Others are software packages you can install on your own webservers. Note: most freeware / shareware encoding tools offer outdated codecs (such as Sorenson Spark .flv and WMV7 .wmv), with poor file size to quality performance metrics. Below is a list of different compression software used by members of the LongTail community.

1. ON2 Flix Standard (Windows & MAC, $39, VP6 & H.264)
2. The Microsoft Expression Encoder (Windows, $199, VC-1)

And here are a few interesting encoding services. Some of them are hosted, meaning you can upload videos manually or through an API. Others are software packages you can install on your own webservers:

1. ON2 Flix Standard (Windows & Mac, $39, VP-6 & H.264)
2. Microsoft Expression Encoder (Windows, $199, VC-1)
3. FFMPEG (free, H.264, package)
4. HeyWatch! ($0.10 per conversion, H.264, hosted).
5. The VC-1 encoder SDK (free, VC-1, package).
6. The ON2 Flix Engine ($1,000 / year / server, H.264 & VP-6, package).
7. Bits on the Run (free for the first gigabye, VP-6 & H.264, hosted)

Source material

Bad source material (shaky camera; background noise) makes for bad compression. Lots of cuts or motion also results in bad compression. A compressor roughly works as follows: it saves one frame (the key frame) and then saves only the changes that occur in the following frame. This process repeats in the next key frame. So if you have a lot of cuts, every pixel of these intermediate frames must be saved. However, If you only have a talking head, only a few pixels will change and the file will compress very well. Hence, using mounted cameras when shooting live footage also helps video quality quite a bit.

Another tip is not to compress your source file any more than necessary. For example, mobile phone cameras deliver video that is already compressed, so there’s no need to compress it any further. Whenever possible, use the highest-quality recording mode on your device and then compress the file.

Compression settings

With the introduction of codecs like VC-1 and H.264, DVD-quality online video is readily achievable. Even HD is available online, though I advise against using it since it is still too demanding for both the average internet connection and the average CPU. When using DVD quality, be sure to offer a small version (no wider than 360 pixels) of any video you deliver in DVD, since not everybody has a cable connection.

For compressing your video, choose a bit rates (bits per second) with both the size of the output and quality of the input file in mind. Whenever possible, use two-pass encoding; it will take longer to encode, but the file will look better. Here's a rough overview of what bit rates to use at various screen sizes:

Output size	Bitrate	Filesize
320x240 pixels	400 kbps	3MB / minute
480x360 pixels	700 kbps	5MB / minute
720x540 pixels	1000 kbps	7.5MB / minute

If you are able to set key frame intervals in your compression software, Flash can only scrub to these key frames. So if you compress a movie with very few key frames, a user can only scrub to a few points inside your video. You can always compress with more key frames, but the tradeoff is larger file sizes.

For audio, bit rates from 96 kbps to 164 kbps are usually fine. Test a few different bit rates to see if the sound looses any crispness.

Note that an FFMPEG encoder (and all software that builds upon it) has a huge range of settings for tweaking conversions. This may be overwhelming at first but these guides should help get you started.

Delivering video files

For publishing FLV or H.264 files you can use the JW Player (or another player).You don't need Flash software, just a text editor to insert the player’s settings in your HTML file. Here's a tutorial on how to embed the player. More information about the player can be found in the JW Player Wiki.

For publishing VC-1 files, it's best to go with the JW Player for Silverlight. (built with Silverlight). Because Silverlight is not widely installed yet, most of your users will have to go through an auto-installation process. If you don't want to force your users to download Silverlight, you can use JavaScript to sniff for the availability of Silverlight and offer the Windows Media Player for users who don’t have it.

Here's an example JavaScript sniffer:

function isSilverlightInstalled() {
  var isSilverlightInstalled = false;
  try {
    try {
      var slc = new ActiveXObject('AgControl.AgControl');
      isSilverlightInstalled = true;
    } catch (e) {
        if ( navigator.plugins["Silverlight Plug-In"] ) {
        isSilverlightInstalled = true;
      }
    }
  }
  catch (e){}
  return isSilverlightInstalled;
}

FLV Metadata

There is an annoying bug in most older FLV compression software (notably FFMPEG); files’ duration and dimension metadata is either not saved or saved incorrectly, leaving any playback progress and movie-scrubbing useless. You can solve these problems by patching your FLV files with a small, free program. For the desktop, use Buraks FLVMDI; for server side use YAMDI (in C) or FLVTool2 (in Ruby).

In addition to fixing the width / height / duration of an FLV file, these tools place a key frame-byte position array in your metadata. This array is used by the JW Player to enable HTTP streaming of files (e.g. video streaming without using a streaming server).