preparing video for the web
embedding video on the web can be a tricky endeavor. ultimately its success depends on the accessibility of the video to most users. in part this depends on circumstances beyond the control of the web designer, such as the kind of software or connection the site's users will have. however, web designers can anticipate these factors and prepare video that works for the most prevalent configurations.
standard video players
in preparing video for the web, one of the most significant choices is what video format to use. video players are rarely compatible with all of the video formats that exist, so the choice to use a given video format determines which video players will be able to play the video, and in turn which users will be able to view the video without downloading additional software.
the most common players are windows media player (bundled with microsoft windows, not available for mac osx or linux), apple quicktime (bundled with mac osx, available for windows, not for linux), and adobe flash (available for windows, mac, and linux). adobe claims that flash has a 99% presence in 'mature' and 'emerging' markets, and as adobe flash is used for the video players on sites like youtube, google, and yahoo, it has become the de facto standard for embedded video players.
player support for video formats
the three main video players have little overlap in the video formats supported:
- Windows Media Player: WMV, ASF, MPEG-1 (attempts to download other codecs on demand) [ref]
- Apple Quicktime: MPEG-1/2/4, H.261/3/4, 3GPP, Sorenson Spark [ref]
- Adobe Flash: H.263-variant/Sorenson Spark, On2 VP6 (with Flash 8), H.264 (with Flash 9 Update) [ref]
so, choosing a video format carries the implicit requirement for the user to view the video with a specific player. the ubiquity of adobe flash is good reason for choosing one of its native formats. however, there are other reasons to prefer using it for video:
- first, the adobe flash player is free. (windows media player is free only to windows users, and while apple offers a free version of quicktime, they take every opportunity to advertise their paid 'pro' version.)
- also, flash provides not a video player but a framework for creating video players, allowing you to create a video player customized and well integrated within your site.
- finally, with a very recent update to the flash 9 player, adobe has changed the native video format from the proprietary On2 VP6 format to the more advanced and relatively open H.264 format (ref). this will make it much easier to produce video for flash players.
for more on video codecs, see this article on rail spikes.
preparing video for the web
the differences among these video formats lie in the techniques used to compress and decompress video data. raw video data is very large, so the use of codecs to compress and encode the original data is essential to making a video usable on the web.
many of these techniques have been developed for specific commercial purposes (like MPEG-2 for DVDs, sorenson spark for quicktime and flash), and the codecs used to encode or decode this video are restricted by costly licensing requirements. this has prevented many free/open source software projects from implementing these technologies (for example, linux multimedia software could not play DVDs before the proprietary encryption system was circumvented with the DeCSS software).
however, the open source community has produced free versions of many codecs, providing nearly universal video decoding compatibility as well as encoding capability for several important formats. much of this work is available through the ffmpeg project (compability list), which is the audio/video engine at the core of many free software programs.
perhaps the most important function of ffmpeg is the ability to transcode or to change video from one format to another. this is an essential step in preparing video for the web, as the source material is often in a format not particularly well-suited for embedding in web pages (digital cameras often record video in the M-JPEG format, digital camcorders in DV, and video editing software export to MPEG or sorenson). in addition to the formats natively supported by ffmpeg, the following projects extend its support to other codecs:
- x264 provides H.264/AVC video encoding
- LAME is a MP3 audio encoder
- for MPEG-2/4 AAC audio, FAAD2 is a decoder and FAAC is an encoder
- liba52 is an AC-3 (Dolby Digital) audio decoder
- Xvid is a DiVX-compatible free encoder/decoder
ffmpeg can be built for windows, mac os x, and linux systems (official releases are in source code form only, so you need software development tools to produce a usable program). after building and installing ffmpeg, you can use it to create adobe flash videos (that use the H.263 video and MP3 audio codecs) with the following syntax:
ffmpeg -i <<source video>> -f flv <<output video>>
there are a plethora of command-line options to control aspects of the conversion process and the output format. for example, you can specify the desired video quality level, resize or crop or add padding to the video, add or remove tracks from the audio, and tweak the volume level. ffmpeg can also be used in scripts to automate video conversions, such as automatically converting uploaded videos (of diverse formats) to a standard format (this is the crux of sites like youtube).
from this point, some interesting next steps could be encoding to other formats (H.264 for the new flash player or MPEG-4 for higher definition versions) and creating a script to automate the encoding process for uploaded videos. i'll explore these further in the future...
Comments