Web video
Adding audio and video
to web site concepts
Preparing / optimising /
compressing digital
video files
Adding video to web
sites & multimedia
Real Time & HTTP
streaming concepts
Video upload sites
YouTube 
vimeo.com - Digital audio file formats
- Preparing/optimising/compressing digital audio files
- Adding digital audio to web sites
- Uploading music
- Digital video file formats
- Preparing/optimising/compressing digital video files
- Adding digital video files to web sites and multimedia
- Codecs, formats & optimising concepts (audio and video)
You may prefer to skip down the page to our recommendations.
Primary methods
There are currently several primary ways to integrate audio and video into web sites. Audio only is straightforward but choosing a video format that will be compatible with all end users is still a challenge as the following table illustrates ...
| Method | Notes | Pros | Cons |
|---|---|---|---|
| Audio | |||
| MP3. Link to an MP3 file from any type of web page link | All mobile, laptop and desktop devices can replay MP3 audio with either default apps (Windows Media Player, iTunes etc) or one configured by the end-user | Total compatibility, good quality possible | Few except not as good quality as uncompressed formats (CD, Flac etc) |
| AIFF or WAV. Link to a file from any type of web page link | Most mobile, laptop and desktop devices can replay .aif and .wav audio with either default apps (Windows Media Player, iTunes etc) or one configured by the end-user | Best quality and good compatibility | Larger file sizes, slower download |
| Flash. Create a Flash movie with embedded or linked audio, and bespoke controls for playing it. | You can create sophisticated playlist's and controls | Flexible and visual | Lack of Flash mobile plug-in means limited support on mobile device |
| <embed> tag | Use the <embed> or <object> tags to link an audio file into a web page by writing code that will call a plug-in (usually Flash, QuickTime, RealPlayer or Windows Media Player) to play it. | Allows you to specify and configure player. If you "embed" an audio file in your page it will download automatically with the page and start playing in the background when download is complete | No longer properly supported by browsers. You may need to use multiple embed tags for different platforms. Read the warning advice later on this page about using the <embed> and <object> tags. |
| Flac (Free Lossless Audio Codec). Link to a Flac file from any type of web page link | Not all end-users will be have a suitable player. | Excellent quality, low file sizes | Poorer player support. No iTunes support |
| Video | |||
| QuickTime. Link to a file from any type of web page link | You could use a still image "Click to play" image button and let the end-user know the file size and type thus allowing them to decide if they want to play/download it. | Works on all Apple devices. Excellent quality (MP4/h.264 support) | Player not always pre-installed on PCs and mobile devices |
| Windows Media Video. Link to a file from any type of web page link | You could use a still image "Click to play" image button and let the end-user know the file size and type thus allowing them to decide if they want to play/download it. | Works on all Windows devices. | Not compatible with Apple devices |
| DivX. Link to a file from any type of web page link | You could use a still image "Click to play" image button and let the end-user know the file size and type thus allowing them to decide if they want to play/download it. | Good quality | Player not pre-installed on all devices or available for all devices |
| Flash movie. | Create a Flash movie with embedded or linked video, and bespoke controls for playing it. Click here for help | Player pre-installed on most laptops and desktops. Flexible interface. MP4/H.264 quality | Not compatible with mobile Apple devices and many other mobile and smart phones. High power overhead drains batteries fast |
| Flash video. | Encode a video edit with Flash Video Encoder and "embed" it and the Flash player in a web page. Click here for help | Player pre-installed on most laptops and desktops. Choice of player skins. MP4/H.264 quality | Not compatible with mobile Apple devices and many other mobile and smart phones. High power overhead drains batteries fast |
| YouTube | Publish/upload a video file to YouTube and then paste the "embed" html code they supply into your web page so it will appear there. More advice is here | Best compatibility with almost all computer nd mobile devices supported | Limited control over encoding quality. YouTube branding. |
| <embed> and <object> tags | Use the <embed> or <object> tags to link a video file into a web page by writing code that will call a plug-in (usually Flash, QuickTime, RealPlayer or Windows Media Player) to play it. | Allows you to specify and configure player | No longer properly supported by browsers. You may need to use multiple embed tags for different platforms. Read the warning advice later on this page about using the <embed> and <object> tags. |
| HTML 5 | Discussed here | No plug-ins required | Not ratified. Dissagreements abound over which format to adopt, WebM or H.264/MPeg4 |
Audio - our recommendations
Video - our recommendations
The dominant audio/video player technologies
As of August 2010 there are 3 primary methods by which devices (computers, mobiles, games consoles etc) can replay audio and video ...
- Native HTML 5 web browser support
- Web browser, or system level, plug-in (QuickTime, Flash, Windows Media etc)
- Stand alone application or mobile app (iTunes, DivX player, Windows Media Player, Flash player, YouTube mobile etc)
1. HTML 5
2 & 3. Web browser plug-in and stand alone application media player comparisons
Media player software allows 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).
| Media player comparisions | |||||
|---|---|---|---|---|---|
| HTML5 | QuickTime | Windows Media Player | Flash | DivX | |
| Player utility | Browser native | Yes | Yes | Yes | Yes |
| Browser plug-in | Browser native | Yes | Yes | Yes | Yes |
| Installed base | Click here | All Macs most PCs | All PCs some Macs | Most Macs & PCs | Some PCs, few Macs |
| x-platform | Yes | Yes | Yes | Yes | Yes |
| Choice of codecs | Yes/no! More here | Excellent | Poor | OK | n/a |
| MPEG-1 codec | No | Yes | Yes | ? | Yes? |
| MPEG-4 format | Yes | Yes | Yes | Yes | Yes? |
| Ogg Therona | Yes | ? | ? | Yes | No |
| Sorenson codec | No | Yes | ? | Yes | No |
| WebM | Yes | No | No | No | No |
| H.264 codec | Yes | Yes | Yes | Yes | No |
| Good for CD/DVDROM? | Yes | Yes | OK | Yes | No |
| Good for web? | Yes | 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 video player comparisions (browser plug-ins) | ||||
|---|---|---|---|---|
| File format | User base | x-platform | Flexibility | Video/audio quality |
| Flash player | Discontinued format | Mac and PC | Good quality, Flash has the On2 VP6 and Sorenson Spark codecs but control over compression quality is not the best. You can design your own playback controls or choose from a number of skins. | Good |
| QuickTime | All Macs, majority of PCs | Mac and PC | Good choice of codecs, optimising parameters and file formats. | Excellent |
| 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 | All - web browser and mobile app | Mac and PC | Previously a Flash technology. 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. Flash video files can be created with the Flash Video Encoder app and either be embedded into or linked to a Flash movie file, or linked directly to a web page with a choice of preset playback control "skins". More on this process is here.
Flash video files can be encoded with the Sorenson Spark or On2 VP6 (an H.264/MP4 codec variant?) video codecs and MP3 audio codec. On2 VP6 is preferably but requires the latest (version 9) plug-in/player. According to Adobe 96% of internet users have at least 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 which delivers superior video quality. However, the plug-in is a small download so persuading 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 excellent codecs, and arguably provides the most flexible and powerful optimising controls, and has been the web video file format of choice for film and video professionals. Significantly, QuickTime includes the best current audio and video codecs including H.264 (MP4). Once you have used this codec you will become dissatisfied with alternatives! QuickTime is no longer the market leader, having lost market share to the Flash player in recent years.
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. Recently YouTube has been re optimising all the "raw" uploaded video stored on its servers to HD (probably Flash/On2 VP6 format) so users can choose the best quality for their connection.