Optimising video for web sites & multimedia (May 2008)
Introduction
This article suggests some settings for compressing video for multimedia and website projects. You may wish to read the following articles first ...
Digital video file formats & codecs
When optimising video you must consider 5 primary factors ...
- What media playing software your end-user has installed
- What speed & format optical drive your end-user has
- What speed of internet connection your end-user has
- What codecs do the various media playing software packages contain
- Which codecs offer the best quality / file size relationship for your needs
A word about terminology
Optimising, encoding and compressing mean the same thing in this context, reducing video files sizes down using a codec to make them quicker to send over a network or smaller to fit on a storage device.
Decoding, decompressing, uncompressing mean the same thing, opening files using a codec to replay them.
The dominant media/video player technologies
Media player comparisons
Media player applications allow computers to replay video, animation and audio in stand alone player applications or by employing a plug-in within a wide range of file formats (web pages, pdf, Director files, Flash files etc).
| Computer media player comparisions | ||||
|---|---|---|---|---|
| QuickTime | Windows Media Player | Flash player | DivX | |
| Player utility | Yes | Yes | Yes | Yes |
| Browser plug-in | Yes | Yes | Yes | Yes |
| Installed base | All Macs most PCs | All PCs some Macs | Most Macs & PCs | Some PCs, few Macs |
| x-platform | Yes | Yes | Yes | Yes |
| Choice of codecs | Excellent | Poor | OK | n/a |
| MPEG-1 codec | Yes | Yes | ? | Yes? |
| MPEG-4 format | Yes | Yes | Yes | Yes? |
| Sorenson codec | Yes | No | Yes | No |
| H.264 codec | Yes | No | Yes | No |
| Good for CD/DVDROM? | Yes | OK | OK | No |
| Good for web? | Yes | Yes | Yes | Yes |
Web video player comparisons
In order to play video, web browsers must employ a player application or browser plug-in. Unlike MP3 audio (which will play in virtually any audio or video playback software), video data must usually be presented in a player application or browser plug-in file format. The following chart presents the current (2008) primary video playback technologies.
| Web site video player comparisions (browser plug-ins) | ||||
|---|---|---|---|---|
| File format | User base | x-platform | Flexibility | Video/audio quality |
| Flash player | Most computers have the Flash player plug-in but not all | Mac and PC | Good quality, Flash now has the H264/MP4 codec but control over compression quality is not the best. You can design your own playback controls. | Good |
| QuickTime | All Macs, majority of PCs | Mac and PC | Great choice of codecs, optimising parameters and file formats. | Superb, still the best |
| Windows Media Player | All PCs, only some Macs | Mac and PC | Poor. You'll reach all PC users but control over optimising quality is poor. | Average |
| Real Video | Declining | Mac and PC | Too expensive and inflexible, perhaps a viable option only for real time server streaming (broadcast). | Average / poor |
| DivX | Some PCs and Macs | Mac and PC | Great quality but inflexible optimising and playback tools. | Very good |
| YouTube | - | Mac and PC | Not strickly a player application format(it uses Flash). Publish once to YouTube then insert code into your web page so the video appears there in the YouTube player. Good but you're stuck with their player/branding. | Has been poor but the new HD (H264) option is good |
Flash video format
Flash video has become the most popular for web based video. It allows video to be embedded in or linked to a Flash movie.
Flash video files can be encoded with the Sorenson or H264 codecs. H264 is preferrably but requires the latest (version 9) plug-in/player. According to Adobe 96% of internet users have the Flash 7 plug-in/player installed but this version only handles inferior Sorenson encoded files. As of 2008 only 63% have the Flash 9 plug-in/player. However, the plug-in is a small download so persuding users to upgrade shouldn't be too difficult providing they are not at school or work where they will be unlikely to have administrator access.
QuickTime
QuickTime is a x-platform (Mac & PC) media player and codec application. QuickTime is installed on all Macs, most PCs and is available as a FREE download. Read more here
QuickTime includes a wide range of the BEST codecs known to man, has the most flexible optimising controls, looks great and is the file format of choice for film and video professionals. Significantly, QuickTime includes the best current audio and video codecs including ...
Sorenson 3
H.264 (MP4)
Once you have used these codecs you will not be satisfied with MPEG-1 or Indeo!!!
Windows Media Player
On Macs and PCs, Windows Media Player can play video and audio files created in the proprietary Windows Media Player format as well as some non-media player file formats such as MPEG-1 and MPEG-4. The proprietary file formats utilise a number of video and audio codecs but Microsoft seem a little cagey about exactly what they all are! Find out more here.
Real video
Real video is losing ground in the media player formats war because it offers relatively poor quality and requires special and expensive server software.
DivX
The DivX video format is good. There are excellent free Mac & PC player and conversion/encoder programs. The problem is, although its basically another file wrapper for an a number of codecs (one of which is an MPEG4 variant), it's another non-standard format
YouTube
Although the YouTube player is not strictly another player format (it uses Flash), it has become so popular that it presents a very effective and easy way of being able to publish to one location (YouTube.com) but present in many other locations, by pasting the YouTube link/player code into your web pages.
Our advice (Oct 2008) for publishing fully compatiible x-platform video
You will need to compress your video and audio using codecs that your end-user system has installed or you will need to persuade them to install the required codecs to watch your video. But remember, end-users at college, school or work may not have access privilidges to allow them to download and install new player/plug-in versions.
Our top recommendations ...
1. For 100% end-user compatibility
All Macs have QuickTime and all PCs have Windows Media player, therefore if you provide versions in both formats you will reach the widest audience ...
For the Mac
If you think your end-users will have QuickTime 7 or greater, we think that you should create QuickTime video files (.mov) encoded with the MPG4/ H264 codec. Use the IMA, Qualcomm PureVoice or QDesign Music 2 codecs for the audio soundtrack. QuickTime has all these codecs. Detailed suggested settings are elsewhere on this page.
For Windows
Compress video in a Windows Media Player friendly format. Last time we looked, Microsoft wasn't very open about what codecs it contains, so you'll either need to visit their support site for advice, and/or use their encoder to encode files.
2. For compatibility with all recent Macs and PCs (manufactured in the last 3 years)
Use Flash video but encode using the Sorenson codec. Do some test encoding and reach the best compromise between quality and file size.
3. For 85% (approx) compatibility with all recent Macs and PCs (manufactured in the last 18 months)
Use Flash video and encode using H264/mpeg4. Again, do some test encoding and reach the best compromise between quality and file size.
4. The easy (lazy!) option and for compatibility with all recent Macs and PCs (manufactured in the last 3 months)
Upload your video to YouTibe and re-publish to your web pages by inserting the code they supply. You have very little (or no) control over quality.
Choose a program to optimise your video
Such as ...
- Sony Vegas
- Adobe Flash video encoder (bundled with Flash Professional)
- QuickTime Pro
- Squeeze for Flash (by Sorenson)
- On2 Flix
- Adobe Premiere
- Apple Final Cut / QuickTime Pro
- Apple Compressor
- Apple QuickTime Pro
- MPEG Streamclip
- DivX
Optimising video in the Flash video format
Putting Flash video on the web involves 4 processes ...
- Encode (compress) your source video (DV?) with a codec that the Flash plug-in/player can replay.
- Import the encoded file into Flash and create buttons and devices to play it.
- Publish the Flash movie as a .swf file.
- Link to a web page and upload.
Flash codecs
The Flash plug-in/players can replay 3 formats (codecs) of video file ...
- Sorenson Spark (Flash player versions 7-9)
- One2 VP6 (Flash player versions 7-9)
- H264 (Flash player version 9 with update 3 applied)
Although H264 is the superior codec, the latest Flash player version is required, and not as many end-users will have it as versions capable of replaying Sorenson Spark (as of May 2008).
Encoding Flash video
You can use a number of encoders to create video ready to import into Flash ...
- Adobe Flash video encoder (bundled with Flash Professional)
- QuickTime Pro
- Squeeze for Flash (by Sorenson)
- On2 Flix
You may find the QuickTime suggested settings, found elswhere on this page, useful. Anybody got any advice for this?
Optimising video in the QuickTime format
Here are some suggested settings that have worked for us ...
| QuickTime for 2Mbps broadband or better | ||
|---|---|---|
| Value | Comments | |
| Frame size / rate | 480 x 384 (4:3) |
Experiment with bigger sizes but test the result before publishing. |
| Frame rate | 15 fps | |
| Deinterlace? | Yes | |
| Video codec settings | ||
| Codec | H.264 (an MPEG4 codec) | |
| Quality | High | |
| Keyframe | Automatic | |
| Data rate | Automatic | |
| ... additional optional settings (for Cleaner) | ||
| Crop border | approx 7 pixels left and right, 5 pixels top and bottom | |
| Resize after crop | use 'Better Resize' (Accurate) | |
| Deinterlace | Yes | |
| Noise | Mild blur (optional) | |
| Audio codec settings | ||
| Compression | Apple lossless (music), Apple lossless (speech) | |
| Sample rate | 44.1KHz | |
| Bit depth | 16-bit | |
| Channels | Stereo (music), Mono (speech) | |
| Flatten file? | ||
| PC only | Yes | |
| Mac & PC | Yes | |
| Mac only | No | |
| QuickTime for 512Kbps broadband | ||
|---|---|---|
| Value | Comments | |
| Frame size / rate | 320 x 240 (4:3) |
Experiment with bigger sizes but test the result before publishing. |
| Frame rate | 12 fps | |
| Video codec settings | ||
| Codec | H.264 (an MPEG4 codec) | |
| Quality | Medium | |
| Keyframe | Frame rate x 10 (every 120 frames) | |
| Data rate | 66 kbytes / sec approx | |
| Fast start streaming | On | |
| Compressed header | On | |
| Audio codec settings | ||
| Compression | Apple lossless (music), Apple lossless (speech) | |
| Sample rate | 44.1KHz (music), 2205KHz (speech) | |
| Bit depth | 16-bit | |
| Channels | Stereo (music), Mono (speech) | |
| Flatten file? | ||
| PC only | Yes | |
| Mac & PC | Yes | |
| Mac only | No | |
| QuickTime for CD/DVD ROM | ||
|---|---|---|
| Value | Comments | |
| Frame size / rate | 480 x 384 (4:3) |
Experiment with bigger sizes but test the result before publishing. |
| Frame rate | 25 fps | |
| Video codec settings | ||
| Codec | H.264 | |
| Quality | High | |
| Keyframe | Frame rate x 10 (every 250 frames) | |
| Data rate | (limit to) 270 kBps | |
| ... additional optional settings (for Cleaner) | ||
| Crop border | Approx 7 pixels left and right, 5 pixels top and bottom | |
| Resize after crop | Use 'Better Resize' (Accurate) | |
| Deinterlace | Yes | |
| Noise | Mild blur (optional) | |
| Audio codec settings | ||
| Compression | None or ... IMA 4:1 (music) Qualcomm PureVoice (speech) |
|
| Sample rate | 44.1KHz | |
| Bit depth | 16-bit | |
| Channels | Stereo | |
| Flatten file? | ||
| PC only | Yes | |
| Mac & PC | Yes | |
| Mac only | No | |
There are other alternative combinations of course. Try experimenting.
Optimising video in the WMV (Windows Media Video) format
Microsoft provide some encoder tools for this but are cagey about codecs and settings. Go here for more help. Anybody got any advice for this?
Optimising video in the DivX format
Download the software from divx.com , open the encoder app, select a settings template and drag your source video file onto the app. Easy! You can also fine tune the settings withy the advanced feature. Choose the Home Theatre settings and then try applying our MPEG-4 settings.
Related downloads
None at present
