Adding video to web sites & multimedia by Dane Ramshaw & Matt Ottewill (Nove 2012)

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 ...

  1. What media playing software your end-user has installed
  2. What speed & format optical drive your end-user has
  3. What speed of internet connection your end-user has
  4. What codecs do the various media playing software packages contain
  5. 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 (Nove 2012) 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 or Vimeo
  2. Flash video for desktops only
  3. 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. YouTube or Vimeo

The simplest way ..

  • Create a YouTube or Vimeo account / channel
  • Upload / encode your video - many video editing applications can export directly from the timeline. If you can, don't re-compress your video when exporting your edit before upload.
  • Link from your website or embed in your website (copy the html or URL that YouTube and Vimeo provide)

 

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.

If you have problems with getting your video to look OK, try the settings in this chart ..

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)  

 

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 Cons
85% (approx) compatibility with all recent Macs and PCs. You can always provide a link to "Watch on YouTube" as a fall back for devices which don't support Flash. Like this Poor or no support on mobile devices.

 

There are 2 primary ways for adding Flash video to your site ...

  1. 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.
  2. 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 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)
480 x 270 (16:9)

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)
320 x 180 (16:9)
384 x 216 (16:9) or
480 x 270 (16:9)

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)
320 x 240 (4:3)
320 x 180 (16:9)
480 x 270 (16:9)

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.