Integrating digital audio & video files into web sites
Introduction
This page gives a basic overview of ways to integrate audio & video into web sites. If you have not already done so you may wish to read the following pages first ...
On audio ...
Optimising (compressing) digital audio files
Uploading music Simplified advice on using iTunes and free and paid-for download web sites.
On video ...
The role of browser plug-ins
Web browsers cannot play audio and video without the help of plug-in software or a separate application. The most common media player plug-ins are ...
- QuickTime
- Windows Media Player
- Flash
- Real Media player
- DivX
You can install all of these plug-ins (except Windows Media Player which is now PC only) on Macs and PCs and then configure your browser to use them when it encounters audio and video files. There is not much difference between them except ... most video professionals agree that the MPEG4/H264 codec is the best and you will need to use either QuickTime plug-in, or Flash plug-in/player version 9, to take advantage of it.
| Web site video player comparisons (browser plug-ins) | ||||
|---|---|---|---|---|
| File format | User base | x-platform | Flexibility | Video/audio quality |
| Flash video | Most computers have the Flash player plug-in but not all | Mac and PC | Good quality, Flash video employs the On2 VP6 and Sorenson Spark codecs. If you use Flash you can design your own playback controls. If you simply prepare a raw video file with the Flash Video Encoder app, you can insert the finished file in a web page and chose from a number of playback control skins. | Good |
| QuickTime | All Macs, majority of PCs | Mac and PC | Great choice of codecs, optimising parameters and file formats. | Still the best |
| 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 strictly 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 |
Primary ways to integrate audio and video
There are several primary ways to integrate audio and video into web sites ...
| Audio | Video |
|---|---|
| Link to an MP3 file from a web page | Link to QuickTime, Windows Media Player, DivX file from a web page. You can let the end-user know the file size and type thus allowing them to decide if they want to play/download it. |
| Create a Flash movie with embedded or linked audio, and bespoke controls for playing it. | Create a Flash movie with embedded or linked video, and bespoke controls for playing it. |
| No longer recommended but ... 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. If you "embed" an audio file in your page it will download automatically with the page and without warning, ie slowly!! and start playing when download is complete. Read the warning advice later on this page about using the <embed> and <object> tags. | Encode a video edit with Flash Video Encoder and "embed" it in a web page. |
| Publish/upload a video file to YouTube and then paste the code they supply into your web page so it will appear there. | |
| No longer recommended but ... 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. Read the warning advice later on this page about using the <embed> and <object> tags. |
Whichever method you use, you must test on a variety of end-user systems.
Video
Linking to a video file
A simple link to an video file might look like this ...
or ...
(QuickTime video 2.3Mb)
NOTE: It is considered good practice to identify the file type and size.
The problem with this method is that you will need to provide the video in both QuickTime (all Macs and many PCs have this), AND Windows Media (Player) format (all PCs and very few Macs have this). More advice is here
Using Flash video
Click here for an article on how to add Flash video to a web site
YouTube video
Publish/upload a video file to YouTube and then paste the code they supply into your web page so it will appear there. More advice is here
Audio
Linking to an audio file
In many ways linking is best because it leaves the end-users system and browser to decide on what to do with it. Depending on the end-user's browser's "file helper" settings, browser version, installed software and installed plug-ins the sound may ...
- Play in a browser plug-in.
- Download to disk.
- Launch an audio playback application.
- Cause an error and perhaps render in a browser window in the form of nonsense text!
A simple link to an audio file might look like this ...
NOTE: It is considered good practice to identify the file type and size.
Creating a bespoke Flash audio player console
Flash has evolved into serious development platform for programmers and non-programmers, and contains functions for the control and playback of audio and video files which may be either embedded in a Flash movie or linked to it. If you want to create your own bespoke player "console" you will need to be familiar with ActionScript.
Using the <embed> tag
WARNING: This method is not recommended by either us or w3.org
An alternative to linking is to add some code that will attempt to control the way a file will play and with what controls. Using the <embed> or <object> tag will normally result in the end-user browser using the default plug-in (typically QuickTime, Windows Media or Real Audio) to play the file with or without the default plug-in playback control panel.
IMPORTANT: Embedding does not mean the audio file is embedded in the page, IT IS STILL LINKED!
A word of warning!!!
-
The <embed> and <object> tags are not supported across all browser (versions)
-
www.w3.org discourages the use of the <embed> tag and encourages the use of the <object> tag, but this is a little used and badly supported tag also.
-
You may be better off linking to your media files rather that embedding them
-
Do NOT embed large files (experience suggests files over 3Mb embed badly)
-
Embedding large files (over 200Kb) will slow the overall appearance of your page
Embedding audio invisibly into a page
First ... have you read the warning above?
You can insert the following code (change the file name of course!) in the <head> tag of a page to make an audio file play automatically and with NO visible controls ...
<embed src="mysoundfilesname.mp3" autostart="TRUE" hidden="TRUE"></embed>
NOTE: The hidden parameter works erratically in Netscape.
Embedding audio with visible controllers
First ... have you read the warning above?
You can insert the following code (change the file name of course!) anywhere on a page to make an audio file play with visible controllers ...
<embed src="mysoundfilesname.mp3" height="40" width="144" controls="CONSOLE" autostart="FALSE" loop="FALSE"></embed>
It looks like this >>>>
Listen to some record surface noise here ...
Related downloads
None at present
Free music MP3s
