CGS 3063 HTML tutorial QuickRead 11

QuickRead 11: Adding MultiMedia to your page

Multimedia, whats that?

Actually, multimedia is one of those buzz words that is a little vague. Multimedia just means more than one type of media (or medium) is used to present information. So if you have pictures and text, you have multimedia. More commonly, people think of multimedia as including sound and/or videos which is what we are going to look at with this tutorial.

The first part to getting either sound files or video files (or for that matter, pictures) to show up on your page is to find them. You can reference files on other people's cites or store them on your own site. If you find something you like somewhere else use the right click and save method (right click on the thing, choose save link as). You probably already have some sound or video files on your computer (try going to start, find, and typing "*.wav" in the box). Once the file is on your computer (or on a disk), use FTP to transfer the file to your web page. Make sure you know where you put the file (on your grove account, it needs to be within the public_html directory or in a subdirectory of public_html). For further instructions and help with FTP see our Technical Info section.

Playing Sound Files

Sound files are actually pretty easy to put in your web page. They use a tag called "embed" which works in a similar way to the <img> tag used by pictures. Here is a simple exampe:

The html line that does that is <embed src="canyon.midi">. This sound file may have started playing when you brought up this page, if not click the button that looks like a play button (arrow pointing to the right). The "thing" with the play/pause button, volume button (or slider), and stop button is called the console.

The console that shows up depends on the browser you have and the plugins you have. Plugins are separate programs that are used by the browser (Netscape or IE) to handle things they don't know how to. It is kind of like a helping hand program. It is possible that your own system won't be setup to play these. If it isn't, the browser may suggest downloading a plugin. If it does, go ahead and download and install the plugin following the directions given by the browser and the plugin. This is typically a pretty automatic process and should not pose any problems. Usually, you will need to close your browser (exit netscape) and restart it for the new plugin to work (this is true of plugins in general, not just those for sound files). It may take some time to download the plugin depending on your internet connection speed.

Now lets take a look at the syntax. First there is the <embed > tag followed by an attribute called src. Look familiar? Thats right, same thing as the <image > tag. src="canyon.midi" is telling the browser that the sound file is called canyon.midi. As with pictures (and other unix files), if the file is not in the same directory as the html file (the one with the <embed> tag in it, probably index.html), you will need to tell the browser where to find it (using the directory name(s) where the file is located within public_html separated by / ). You can even put a full URL in here if the file is on another cite (with their prior permission of course). The <embed> tag allows several attributes that can be very useful, here is a list of the more common ones:
Attribute name=(Possible Values)--Meaning

src="filename"--the name of the sound file to play

autostart=(true, false)--If true the sound file will start playing as soon as it is loaded

border=(Number)--which creates a border around video

loop=(true, false, number)--which sets how many times a file will

width=(number)--sets the width of the console in pixels

height=(number)--sets the height of the console in pixels

For example

is done with the tag <embed src="canyon.midi" width=250 height=20 autostart=false loop=1>
As you can see there is the little console (250 wide and 20 tall) comes up and plays myfile.mpeg 1 time when you click play.

There are a few issues you should be aware of with sound files. Unfortunately, sound files (and videos) don't play the same way in every browser. Different browsers, different versions of the same browser, different options in that browser, or different plugins can all make the way the browser plays these files a little different. The console looks different for every combination. Also, the defaults for the attributes (like autoplay and loop) change. For some combinations, loop only has an affect if autostart is set to true. The best way to find out is to just try it on your computer and get some friends to look at your page on their computers (which is the best way to test anything, find out what people like). Some file formats can not be played by all browsers (just like some browsers can not display some picture formats). The most widely accepted formats currently are probably wav and midi files. au is also supported alot (though it often sounds horrible). mp3 files are becoming common but some older browsers haven't caught on yet. Other relatively common formats include: mp2, mpa, rmi, mid, cda, ram, and aiff. We suggest you stick with midi, wav, and only use MP3 if the people who see your page have the plugin, for the assignment use midi or wav) files as they are the most widely accepted (that still sound reasonable).

Remember that the person viewing your page has to wait for the sound file to download, so don't use too big a file or you will annoy them. It is generally a bad idea to make the console so small that it dissappears (ie setting width and height to be 0). This means that people looking at your page can't tell the music to stop if the song repeats (ie loop=true). No matter how good you might think the music is, it gets old and annoying if you have it set on loop=true, it just keeps going and going and ....

The embed tag was originally for Netscape only, but recent versions of Internet Explorer seems to recognize it too. IE also uses the tag <bgsound ...> with the same attributes as <embed>, but Netscape does NOT recognize it at all. You can also play sound files by using Javascript, but this way is simple.

Playing Videos

The key tag to putting video on your web page is also the <embed> tag. This tag is used to "embed" a video into a web page. It looks (and acts) nearly identically to the <embed ..> tag used for sound files. It has the attributes the only difference being that the filename used as the value of the src attribute is now a video file instead of a sound file.

Unfortunately, the browser problem mentioned regarding sound files is even a bigger issue in videos. HTML really doesn't have a definitive way to play a video on every system. One way around this is to make a link to the video instead of actually playing it on the page. This is done with the good old <a ..> tag. For example, Video is a link to a video on our web site. The code looks like
<a href="../lectures-text/uglywoman.mpeg">Video</a>
which is basically just the same as a regular link (by the way, you can do this with sound files also). This gives the person looking at your page the option to view the video (if their system is configured for it) or download the file for later viewing.

The most common video formats are mpeg, mpg, rm, avi, and ram. wmv, asf, and mov or other relatively common standards. rm and ram are RealPlayer files and require the RealPlayer software to play. mpeg, mpg, and avi are playable by the Windows Media Player that comes with windows (though it may need to download additional software too, this stuff gets complicated).

Get Behind the Wheel

Now its your turn to Drive the Sound

(Actually, we have been having some problems with this part, just put the code in your page if you want to test it)

<html>
<head>
<title>Sound Off (or actually Sound On!!)</title>
</head>
<body>
Now hear this!
<embed src="canyon.midi" height=10 width=200 autostart=true>
</body>
</html>

Index