Adding video to web sites & multimedia
Introduction
This article suggests some settings for optimising video for multimedia and website projects. You may wish to read the following articles first ...
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.
Choose a program to optimise your video
Such as ...
- Sony Vegas
- Adobe Flash video encoder (bundled with Flash Professional)
- QuickTime Pro
- MediaCoder
- Squeeze for Flash (by Sorenson)
- On2 Flix
- Adobe Premiere
- Apple Final Cut / QuickTime Pro
- Apple Compressor
- Apple QuickTime Pro
- MPEG Streamclip
- DivX
Our advice (August 2010) for publishing fully compatible 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 privileges to allow them to download and install new player/plug-in versions.
Our top recommendations ...
1. YouTube, easiest option for almost 100% compatibility with computers and mobile devices
Upload "raw" video files (DV?) to YouTube, where your video will be optimised and published. Using the code the sites supply, you can re-publish/link/embed to your own web pages. You have less control over quality.
2. Flash video, for 85% (approx) compatibility with all recent Macs and PCs but poor or no support on mobile devices
Encode and publish Flash video using the On2 VP6 and MP3 codecs. Advice on suitable settings is given below.
3. QuickTime & WMV, 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.
4. HTML video tags
According to a recent survey 53% of video is now available in HTML format. Because there are 2 competing formats (WebM and MPeg4/H264), and browser support for them varies, we were somewhat surprised to read this. We would not recommend serving video in this format alone. If in future one formats dominates, or browsers support both, this will become the leading method, but for now perhaps a bit of experimenting and testing with your end-users before publishing would be prudent. We will return this subject.
1. Optimising video in the Flash video format
There are 2 primary ways for adding Flash video to your site ...
- Encode your "raw" video (DV?) into the Flash video format and link it to or embed it in a Flash movie, in which you can create a bespoke skin, and playback controls with ActionScript.
- Import you "raw" finished video edit (DV?) into Flash Video Encoder, optimise it (suggested settings are below), then "insert" the exported file into a web page and chose a skin and some playback parameters for it. Advice is here.
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
The following table shows our recommended settings.
| Flash video settings for broadband | ||
|---|---|---|
| Value | Comments | |
| Frame size / aspect ratio | SD (4:3) 640 x 480 or 600 x 450 SD (16:9) 640 x 352 or 720 x 396 SD (16:9) web upload (YouTube) 720 x 396 |
For SD 16:9 DV, you MUST convert your video from 4:3/16:9 anamorphic to the actual physical DV 16:9 pixel aspect ratio. Highest quality for video upload (YouTube) because files will be re-encoded, use native settings where possible. |
| Frame rate | 12-15 fps. Use 25fps for fast action video. | Highest quality for video upload (YouTube) because files will be re-encoded, use native settings where possible. |
| Deinterlace? | Yes | |
| Video codec settings | ||
| Codec | Sorenson Spark for best compatibility. On2 VP6 for newer computers and Flash plug-in versions (last 2 years). H.264 for latest computers (2010) & Flash plug-in versions. |
Highest quality for video upload (YouTube) because files will be re-encoded, use native settings where possible. |
| Quality | High | |
| Keyframe | Automatic | |
| Data rate | 400Kbps (for base level for 512Kbps broadband) 700Kbps (for 1Mbps broadband) File native or 3-4000Kbps for video upload (YouTube) |
Highest quality for video upload (YouTube) because files will be re-encoded, use native settings where possible. |
| ... additional optional settings | ||
| Crop border | For DV, 7 pixels left and right, 5 pixels top and bottom | |
| Audio codec settings | ||
| Compression | MP3 | |
| Sample rate | 44.1KHz | |
| Bit rate | 128Kbps (music) 64-128Kbps (speech) 320Kbps for video upload (YouTube) |
Highest quality for video upload (YouTube) because files will be re-encoded, use native settings where possible. |
| Channels | Stereo (music), Mono (speech) | |
2. Optimising video for upload to YouTube
YouTube has its own help page but it doesn't give advice on SD 16:9 anamorphic (DV). Use the advice below ...
| Video for YouTube | ||
|---|---|---|
| Value | Comments | |
| Frame size / aspect ratio | Best to leave at current (edit native) resolution. SD (4:3) - either 720 x 480, 720 x 576 SD (16:9) - 720 x 396 HD (16:9) - 1280 x 720 (720p) |
For SD 16:9 DV, you MUST first convert your video from 4:3/16:9 anamorphic to the actual physical DV 16:9 pixel aspect ratio. |
| Frame rate | Leave unaltered (29.97 or 25fps) | Let YouTube handle this |
| Deinterlace? | Yes | |
| Video codec settings | ||
| Codec | DV or H.264 (an MPEG4 codec) | Leave in the camcorders native file format if possible (eg DV), unless the size is too great, then encode in H.264. YouTube will re-encode the video so its best to avoid compressing it yourself first. |
| Quality | Highest | |
| Keyframe | Automatic | |
| Data rate | 1000Kbps+, preferably 2000-3000Kbps | |
| ... additional optional settings (for Cleaner, QuickTime conversion etc) | ||
| Crop border | For DV, approx 7 pixels left and right, 5 pixels top and bottom | |
| Resize after crop | Use 'Better Resize' (Accurate) | |
| Deinterlace | Yes | |
| Streaming | Select Fast start streaming (QuickTime option) | |
| Audio codec settings | ||
| Compression | Unaltered, or highest MP3 available | If you have to compress because of size problems, use the best quality you can. Keep above 196Kbps. |
| Sample rate | 44.1KHz | |
| Bit depth | 16-bit | |
| Channels | Stereo (music), Mono (speech) | |
3. Optimising video in the QuickTime and WMV (Windows Media Video) formats
QuickTime
Here are some suggested settings that have worked for us ...
| QuickTime for 2Mbps broadband or better | ||
|---|---|---|
| Value | Comments | |
| Frame size / aspect ratio | 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 / aspect ratio | 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 / aspect ratio | 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.
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?
Others
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
