Return to Blog Home Page

13 September 2006

Definitive Definition

Over the past few weeks I've had opportunity to be in conversation with people on staff and in other organizations who are actively pursuing excellence in media presentation. For the purpose of WDC we'll keep our discussion to best practices in presenting media on the web.

Now I know the term "media" can refer to all sorts of things, but what I'm really talking about is video. With the availability of hi-speed internet connections, we are quickly moving away from simple HTML pages sprinkled with graphics and the occasional audio clip to rich media sites with intense flash interactivity and (up to) High Definition video.

Just look at the Apple website and their use of media (video) for movie trailers. These video clips are offered in a variety of formats so the user can get the best experience based on their connection speed and willingness to wait:

  • Small
  • Medium
  • Large
  • HD 480p
  • HD 720p
  • HD 1080p

When deciding how you want to display media on your website, consider the following things:

There are a variety of formats available for displaying video on the web. The big players have always been Real video, Windows Media and QuickTime formats. But more recently flash jumped into the game by developing the Flash Video format.

Aspect Ratio
The most common aspect ratios for video are 4:3 (standard television) and 16:9 (widescreen). With the push toward High Definition (HD) most televisions are being built with a 16:9 screen and some of the new video cameras are capable of shooting video in the 16:9 aspect ratio.

File Size
When displaying video on the web, you must be aware of the effect it will have on the end user. Keep in mind there are still people using dial-up. But even broadband users can't view video in full HD format yet without a long wait. For example: Trailers for most official movie websites range from 3-5MB for the small clip to 100MB for the HD 1080p format.

Display Format
Another thing that might come up is the way the video is displayed. Here are the most popular ways to present video on the web:
  • Embedded in a traditional web page on your site
  • Popped up in a new window
  • Popped up in the respective player (QuickTime Player, Windows Media Player, Flash Player, etc.)
  • Managed through a Media Player designed to organize, display and play video clips as part of a media library

Our Solution
At granger we have chosen to convert all video into flash video (.flv) and present it in a Media Player. Our file sizes vary but are usually 15-25MB for a 3-5 minute clip. We have employed a variable aspect ratio presentation format due to our current video library. The player is in the 4:3 format, but can play the 16:9 clips in the typical letterbox format. Using Sorenson Squeeze we convert large QuickTime files (.mov) into the flash video format (.flv) using the setting for a 768K to 1Mbps stream at 360x270. This provides for excellent quality in this size and decent quality when viewed at 200% of the original. The majority of our clips are still in the 4:3 aspect ratio, but we have determined that all future media will be produced at 16:9 when possible.

As far as HD goes we're getting there. But the cost of cameras, hardware and software can get in the way. Also, it takes an incredible amount of server space to record an entire service in HD.

But! Where there's a will, there's a way.

For now we'll work on getting our video in the 16:9 aspect ratio and who knows - someday we may offer all video in 480p, 720p or 1080p!