Adding audio & video to web site concepts by Matt Ottewill (August 2010)

This page gives an overview of adding audio & video to web sites. Our site also contains detailed articles on ...

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

Click here

Video - our recommendations

Click here

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

  1. Native HTML 5 web browser support
  2. Web browser, or system level, plug-in (QuickTime, Flash, Windows Media etc)
  3. Stand alone application (iTunes, DivX player, Windows Media Player, Flash player, YouTube mobile etc)

1. HTML 5

Discussed here

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 Most computers have the Flash player plug-in but not all 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 chose 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 - 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. 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.