Adding video to web sites & multimedia
Web video
Adding audio and video
to web site concepts
Preparing / optimising /
compressing digital
video files
Adding video to web
sites & multimedia
Adding Flash video to
a web page
Real Time & HTTP
streaming concepts
Video upload sites
YouTube 
vimeo.com This article suggests some strategies and methods 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
The terms ... Optimising, encoding and compressing ... all mean reducing video files sizes and data rates (by way of a codec) to accelerate transmission over a network, and reduce storage requirements.
The terms ... Decoding, decompressing, uncompressing ... all mean opening a compressed file (again by way of a codec) in order to replay it.
Choose a program to optimise your video
Such as ...
| Application type | Examples | Notes |
|---|---|---|
| Conversion utilities | Miro Video Converter.com/ / Handbrake / MPEG Streamclip | Often freeware and shareware |
| Video editing programmes | Final Cut Pro / Adobe Premiere | |
| Browser extension/plug-in | firefogg.org | Extension for FireFox |
| Specialist commercial codec optimising | Sorenson / Flash video encoder | No longer widely used |
| Specialist (multi codec) optimising | Cleaner | No longer widely used |
| Desktop DVD authoring programs | Encore / DVD Studio Pro | |
| System utilities | QuickTime Pro / Windows Media Player |
Our advice (February 2011) 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 ...
- Flash video & YouTube
- Flash video
- YouTube
- QuickTime & WMV, for 100% end-user compatibility
A word about HTML 5 video
Hands up those who thought this would provide an easy way to ensure cross platform compatibility? Yes, us too and boy, were we wrong! Avoid until the fighting stops! Discussed here
1. Flash & YouTube
Use Flash video (see 2 below) but provide a link to "Watch on YouTube" as a fall back for devices which don't support Flash. Like this
See 2 and 3 (below) for advice on encoding files.
2. Encoding video in the Flash video format
You can encode and publish Flash video using the MPeg4/H264 or On2 VP6 video codec, and MP3 audio codec. Advice on suitable settings is given below.
Pros: 85% (approx) compatibility with all recent Macs and PCs.
Cons: Poor or no support on mobile devices.
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) | |
3. Encoding video for YouTube
Upload "raw" (as uncompressed as possible) video files (DV?) to YouTube, where your video will be optimised and published. Using the (embed) code the site supplies, you can re-publish/link/embed to your own web pages.
Pros: Easiest option for almost 100% compatibility with computers and mobile devices
Cons: You have less control over quality and are stuck with the YouTube branding and player skin.
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) | |
4. Encoding video in the WMV (Windows Media Video) and QuickTime formats for almost 100% 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.
WMV (Windows Media Video) format
There are various tools available to create WMV files. Search the web and go here for Microsofts tools/help.
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 | |
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.
Find us