Adding audio or video to a web page is very easy. You only have to add a set of object and an embed tags. See the following simple example:
< embed src = "myFile.mp3" autostart="true">< /embed>
That will put an mp3 file named "myFile.mp3" into a web page. Whoever views it will be able to hear it. The autostart property tells the player to begin playing as soon as the file loads in the browser. (Note: for QuickTime you use autoplay instead of autostart.)
However, that sort of shitty code doesn't afford you any control over the player and there are better ways to do things. I'm not going to get into the server side stuff or javascript here, but we will look at different players and the general method for putting them in a web page.
Different Players
There are 3 major players worth looking at:
- Windows Media Player
- RealPlayer
- QuickTime Player
Nothing else matters because nothing else has anywhere near the installed base as those 3. Flash is a different story, so we won't look at it at this time.
The above embed code will play with the users default player, but this may not be what you want. Each player looks different and has different capabilities.
So, which player do you choose? Well, have a bit of patience and we'll get to that. For now, let's look at putting players into an HTML page.
The Object and Embed Tags
A long time ago, in 2 development labs far, far away, Microsoft and Netscape decided to introduce their own ways to put different media into browsers. MS came up with the object tag, while Netscape came up with the embed tag. You can set aside any personal feelings you have either way, because that's the way it is, so get used to it.
There is only 1 way to properly put media into a page - put it in an object tag and then put an embed inside of the object tag. Any other way is wrong, whether it works for you or not.
Here's an example:
< OBJECT ID="myUniqueIdentifier" NAME="myUniqueIdentifier" CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" WIDTH="0" HEIGHT="0">
< PARAM NAME="SRC" VALUE="myMediaFile.ext">
< PARAM NAME="TYPE" VALUE="mime/type">
< PARAM NAME="AUTOSTART" VALUE="True">
< EMBED
ID = "myUniqueIdentifier"
NAME = "myUniqueIdentifier"
WIDTH = "0"
HEIGHT = "0"
SRC = "myMediaFile.ext"
TYPE = "mime/type"
AUTOSTART="True"
>
< noembed>You do not have the appropriate player installed to view this.
< /noembed>
< /OBJECT>
There are 3 basic tags in there, the object tag, the embed tag, and the noembed tag.
noembed
The noembed tag is simply to display a message if the user does not have a suitable player installed. It must immediately follow the embed tag. Typically, you should give the user a link to the appropriate player's home page.
Object & Embed
One of the major differences between these two is how attributes are assigned. Most object 'attributes' are assigned as param tags nested inside of the object's start and end tags. For embed, they are all assigned as attributes inside of the embed tag itself.
Param tags have a name and a value attribute. You can have as many param tags as needed to control the various playback, behaviour, and display properties of the player.
Here are some common shared attributes of the object and embed tags:
- id
- name
- width
- height
- src
- type
- autostart or autoplay
There are many more, but they are either specific to each player, or not particularly relevant at this stage.
ID & Name
Although the id and name attributes DO have different functions, you should always make sure that they are the exact same. i.e. 1) id=123 name=123 is good but 2) id=123 name=456 is bad. The reason being that different browsers treat them differently in different contexts, but if they are the same, you will always get the expected behaviour. It is good practice to always include both.
Width & Height
The width and height attributes merely determine the size of the player in the browser and may be omitted. Above, the player will be invisible because they are both 0. Note that this is NOT a good general practice, e.g. For a QuickTime player, you should never set the height or width to less than 2.
A Parting of the Ways...
This is where the object and embed tags start to part ways. Attributes (or properties if you like) are contained inside of a tag as opposed to being nested inside of a starting and ending tag pair. The object tag has 1 additional attribute, classid, which cleverly enough stands for class id.
ClassID
The classid attribute lets YOU (the designer/coder) choose which player will be used for playback. This is a good thing because most users are morons and would become frustrated if things didn't work properly.
Each player has it's own unique class id. The one above is for RealPlayer. Use the following class ids for different players:
- QuickTime: 02BF25D5-8C17-4B23-BC80-D3488ABDDC6B
- Windows Media Player 7 & 9: 6BF52A52-394A-11d3-B153-00C04F79FAA6
- Windows Media Player 6.4: 22D6F312-B0F6-11D0-94AB-0080C74C7E95
- RealPlayer: CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA
You can also include a codebase attribute in the object tag and a pluginspage property in the embed tag. This is really a total pain in the ass and there's a lot of ball dropping going on.
Codebase & Pluginspage
For example, the pluginspage for QuickTime is http://www.apple.com/quicktime/download/ but the codebase is http://www.apple.com/qtactivex/qtplugin.cab. i.e. codebase has some useful information, but the pluginspage is comletely useless as it will not force a download or do anything that will help the user immediately.
For RealPlayer, you don't even use codebase OR pluginspage.
For Windows Media Player, the codebase is http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=x,x,x,x where x is some number for the right version. The pluginspage for Windows Media Player is just as useless as Apple's QuickTime pluginspage, i.e. http://www.microsoft.com/windows/windowsmedia/.
By this point you should be shaking your head is disappointment with Netscape for dropping the ball so badly. It's no wonder the World Wide Web Consortium adopted Microsoft's object tag as part of the HTML specification.
SRC
The src attribute specifies where the media file is and what it is named. You may want to use absolute URIs for this, but that is usually not necessary. You can set it to almost any file type as long as the target player can play it. i.e. You're not going to get QuickTime to play a wma or wmv file. Generally, you should either use file formats that all the players can playback or you should highly optimize your players and use proprietary file formats, like ra, mov, wma, etc.
Type
This sets the MIME type which tells the player what kind of file to expect. This is the only way that you can try to control which player will be used with the embed tag. An example of a mime type is audio/x-pn-realaudio. There are lots more, and it's really up to you to decide which one you wish to use. Generally, I find that the Real mime types are pretty good and the players recognize them fairly well. You can use audio/x-mpeg-3 for mp3 files as well. There are lots.
Often the players will still play things back correctly even if you specify the wrong MIME type. This of course is not recommended, and you should put in the minimal amount of effort it takes to use the correct MIME type.
An important thing to remember is that your server should be configured for the correct MIME type, and for that, you will need to contact your server's administrator or support team.
AutoStart
This just tells Windows Media Player and RealPlayer to immediately start playback as soon as possible. For QuickTime, use autoplay. It can be set to true or false.
Summary
So, if you just modify the above code with the right classid, MIME type, size (width and height), and point it to the right file, you've got a perfectly functioning player. You can add more attributes or parameters as need for the specific player, and there is a lot more that we could cover, but by now you should have a good grasp of the basics.
Cheers,
Renegade