Preparing Video Content for the Web

This post is also available in: Russian

Efficient content preparation for the Web is becoming ever more difficult:

  • Increasing number and variety of devices: PCs, laptops, mobile devices and TV screens
  • Video sources are encoded in different formats using various codecs
  • Video codecs are becoming more complex (but also more efficient)
  • Growing volume of content and its quality: SD, HD and Full HD.

In this post, we will discuss the major development issues related to content preparation to ensure the highest video quality to your users.

H.264
Currently, the most popular and most effective Web video codec is H.264. It supports three profiles defining the technology used by the encoder and decoder. The simpler the profile, the less resources it requires, but the lower is the ratio between the quality and resulting bitrate.

  • Baseline Profile (BP) – the basic profile for applications with limited resources. It is typically used in mobile applications. No support for B-frames, CABAC and i8x8
  • Main Profile (MP) – originally, it was planned as the main profile for video broadcasting and video storage
  • High Profile (HP) – the most popular profile used for HD video.

Another important H.264 parameter is the encoding level. It determines the maximum resolution of frames, maximum memory usage, maximum bit rate and cache buffer. When selecting the levels, please keep in mind device compatibility: Baseline profile is commonly using levels up to 3.1, Main profile – up to 4.1, and High profile – up to 5.1. Flash Player supports all the levels.
Video Transcoding
To maximize the quality of video in your multimedia project, you should avoid using a common strategy (i.e., encoding options) for all devices. On the contrary, it is better to use a flexible content processing strategy optimized for different devices. For this purpose, you should gain a deep insight into the encoding software you use, learn how to apply filters to video sources (deblocking, deinterlace) and set video resolution/bitrate.
There is a broad choice of content transcoding software. We recommend Adobe Media Encoder CS5 (desktop version), Rhozet Carbon Server (multi-format enterprise-scale transcoding), formerly available as Adobe Media Encoding Server and Flash Media Live Encoder for stream transcoding of online broadcasts. As an open source alternative, you can use ffmpeg (which can run on Linux for faster transcoding).
Specific recommendations exist for each video device. For instance, here you can find recommendations for iPhone/iPad devices. For TVs and mobile devices, please refer to the manufacturer specifications. Generally speaking, the recommendation for mobile devices is H.264, Baseline Profile 3.1, resolution no more than 640 x 480, bit rate of several hundred (200-300) Kbps. For Pcs and TVs, the most common recommendation is to use H.264, Main Profile 4.1, resolution up to Full HD at a few Mbps bitrate.
Here are the key recommendations for configuring H.264 encoder:

  • Multipass encoding – at least two passes
  • Frame rate – as in the source video
  • B-кадры – 3-5, dynamic positioning, b-pyramid enabled
  • Key frame interval – 2 s preferred, no more than 10 s
  • Number of reference frames – 2-5
  • RDO – enabled
  • Adaptive Quantization – enabled
  • Deblocking – enabled
  • Entropy Coding – CABAC

Prior to transcoding, we recommend to apply the following filters to video sources: denoising, deblocking and deinterlace (usually needed for a TV source). When you change the resolution, keep in mind three scaling algorithms: bilinear, bicubic, lanczos (the first removes most of details, the third gives the most accurate result).
As a general guideline to selecting resolution/bitrate, you can use the below tables:
Aspect ratio 16:9

Resolution Bitrate
1920×1080 2-4 Mbit/s
1280×720 1-2 Mbit/s
1024×576 0.8-1.5 Mbit/s
840×480 0.6-1 Mbit/s
640×360 0.4-0.7 Mbit/s

Aspect ratio 4:3

Resolution Bitrate
720×576 0.6-1 Mbit/s
640×480 0.5-0.8 Mbit/s
480×360 0.3-0.6 Mbit/s
320×240 0.2-0.4 Mbit/s

If your content has different aspect ratios, we recommended you to use 16:10 and add functions of intelligent stretching/cutting. To implement dynamic bitrate in your video player, Adobe recommends using a single set of audio codec parameters for different bitrates. Also, you can use Flash Player video rendering features to create an impression of improved video quality. Still, you should use them very carefully as they are highly CPU intensive:

  • smoothing – software smoothing
  • filter – image processing filters
  • Pixel Bender
  • ambilight and other graphical effects.

Finally, I would like to recommend you the blog of Fabio Sonatti, a well-known transcoding expert.

Leave a Reply