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 ...
What are the primary controls for audio files?
I think you probably know this but ...
- Volume
- Panning (or balance)
- Play
- Stop
- Pause
- Fast forward
- Rewind
- Loop playback (continuous play)
Some of these controls are available by using plug-in formats like Windows Media Player and QuickTime. More adventurous designers may prefer to build their own audio controllers with Director or Flash.
The role of browser plug-ins
Web browsers cannot play audio and video without the help of plug-in software. 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. 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 QuickTime or Fash plug-in/player version 9 to take advantage of it.
| Web site 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 now has the H264/MP4 codec but control over compression quality is not the best. You can design your own playback controls. | Good |
| QuickTime | All Macs, majority of PCs | Mac and PC | Great choice of codecs, optimising parameters and file formats. | Superb, 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 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 |
Primary ways to integrate audio and video
There are several primary ways to integrate audio and video into web sites ...
- Link to a file from a web page. Audio will usually be in MP3 format, video in QuickTime or Windows Media Player formats. You can give the end-user the file size and type thus allowing them to decide if they want to play/download it.
- Create a Flash file with embedded audio or video, and bespoke controls for playing it.
- Publish/upload a video file to YouTube and then paste the code they supply into your web page so it will appear there.
- Create a Java application.
- "Embed" the file into a web page by writing code that will call a plug-in (usually 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.
Whichever method you use, you must test on a variety of end-user systems.
1. Link to a file
In many ways linking is better 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 .
Linking to an audio file
A simple link to an audio file might look like this ...
NOTE: It is considered good practise to identify the file type and size.
Linking to an video file
A simple link to an video file might look like this ...
or ...
(QuickTime video 2.3Mb) Get FREE QuickTime player
NOTE: It is considered good practise 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).
2. Using Flash
Flash has evolved into serious development platform for programmers and non-programmers, and containes functions for the control and playback of audio and video files which are iether embedded or linked.
If you want to create your own bespoke player "console" you will need to be familiar with ActionScript.
3. 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.
4. Java apps
Java is a platform independent development langauge. Code heads can create their own apps to play audio and video.
5. Embedding
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 appearence 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 ...
IMPORTANT NOTE FOR VIDEO: Height and width attributes will need to accommodate the clip aspect ratio + contollers.
Related downloads
None at present
