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.
I think you probably know this but ...
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.
Web browsers cannot play audio and video without the help of plug-in software. The most common media player plug-ins are ...
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 |
There are several primary ways to integrate audio and video into web sites ...
Whichever method you use, you must test on a variety of end-user systems.
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 ...
A simple link to an audio file might look like this ...
NOTE: It is considered good practise to identify the file type and size.
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).
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.
Publish/upload a video file to YouTube and then paste the code they supply into your web page so it will appear there.
Java is a platform independent development langauge. Code heads can create their own apps to play audio and video.
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!
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
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.
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.
None at present