Embedding Multimedia

1: Embedded Audio

1.1: The Internet Explorer BGSOUND tag

One of the major uses of multimedia for a web page is the inclusion of audio samples either to illustrate a point, or to provide background music for a web page. Background music can be provided through the use of the BGSOUND tag. Since this tag effects the whole document, but does not actually produce any visible effect, it should be located in the HEAD area of your web page. A simple example of a bgsound tag in use is here. NOTE: The BGSOUND tag only works in Microsoft's Internet Explorer, but viewing it in Netscape will not produce any errors, unless you attempt to access the BGSOUND object inside of a script.

The BGSOUND tag has four possible parameters:

• SRC - the file to be loaded, which can be any kind of sound file your system supports, be it .wav, .mid, or even .mp3 audio. Be carefull however, that you're supplying a file in an audio format that will be supported on other people's machines!
• VOLUME - exactly what it sounds like, how loud do you want this to play. Volume values go from 0, which is normal volume, to -10000, which is OFF. The reason for this is because the volume set here is how different you want your sound's volume to be from what the viewer's computer has set. Thus, 0 would be no change, and -10000 would be much lower. You can't make your sound louder than the viewer's sound settings, so there is no value for this greater than 0.
• LOOP - This is how many times you want your sound file to repeat in the background. 1 means to repeat only once, and 10 would mean to repeat 10 times. If you want your sound to repeat forever, you can give it a value of -1. Short sound files set in the background repeating infinitely can get very annoying, very fast.
• BALANCE - this is just like the balance knob on most stereos - it determines wether the sound is more from the left, or right speaker. A value of 0 means perfectly centered, a value of -10000 means the sound will be entirely from the LEFT, and a value of 10000 means the sound will be entirely from the RIGHT.

If you decide you want to have mercy upon your viewer, and allow them to decide about the background music for themselves, you can easily encorporate the BGSOUND tag into a script by giving it an ID parameter, and manipulating it just like any other HTML Object. Here is an example of just that.

1.2: With the browser independent, but depreciated EMBED tag

Now that we've covered the specialized, Internet Explorer only method of adding sound, we can get to the much more versitile, and browser independant method which is actually part of the HTML 4 specification - the EMBED tag. The EMBED tag can not only be used to add sound (and video) to your page, or can also be used to include any other type of multimedia file or data which your viewer's web browser can handle, AND it's supported to some extent by both Netscape and Internet Explorer's versions from the HTML 4 era. (More modern browsers, not so much.) Most multimedia files are handled in web browsers through the use of plug-ins, which the browser consults about how to handle the multimedia type in question. The EMBED tag tells the browser that it is about to recieve a file, and the browser then looks for the apropriate plug-in to display the embedded media. There is really only one major problem with using the EMBED tag - it was dropped from the HTML and XHTML standards after HTML 4.0, and thus will not pass through any kind of validation, and may not even be recognised by future browser releases. (Note that due to this tag only existing in HTML 4.0 and earlier, the case of the tag name and it's attributes are irrelevant.)

The basic format for the EMBED tag is like this:

The required parameters on this tag are LOOP and HIDDEN. The LOOP parameter in this case merely states true or false wether or not the multimedia item will repeat playing over and over. The HIDDEN parameter is much more important - if it is set to false, it provides the user with a control panel with which they can start/stop/pause the file you have sent them. Thus, if you do not loop the sound, they can hear it again by pressing the play button on their control, or they can pause the video while they go to the bathroom. Here is an example of audio being embedded with an EMBED tag. You can also use this to set the background sound for a page, like this.

Another important thing to know when embedding things in your web page is that different web browsers will handle the embedded item differently. For example, Microsoft's Internet Explorer uses an ActiveX object to play sound files and video that are embedded into web pages (and thus may declare the video to be an unsafe ActiveX component). Netscape on the other hand used Java to do this, and if a viewer's normal setting in Netscape is to have Java turned off, (as many netscape users do to speed up the loading of pages,) then they will not see the embedded content. Most modern browsers will simply make use of whatever video playing plugins are available for the task. If the browser is not able to play the offered file, they are supposed to display whatever alternative has been provided for them between the openning and closing of the EMBED tag. Unfortunately, this part of the specification was implemented poorly at best in most browsers, so it can't really be relied on for fallback in the embed tag.

1.3: The XHTML Object tag

In the XHTML standards, the tag used to embed multimedia content of any type in your XHTML file is the object tag, which takes over the functionality of not only the EMBED tag, but also the APPLET tag for embedding Java Applets. Note: The applet tag exists in XHTML 1.0 transitional, but not in XHTML 1.0 strict - it is being phased out of the XHTML standard, and you should switch over to the object tag for this.

Since this new method is officially part of the XHTML standards, there should be no problems with embedding multimedia in a standards compliant, browser independant manner, right? Wrong. Unfortunately, Internet Explorer does not follow the official standards on how the Object tag should be used, and pages which rely on the object tag must choose which browser they want to actually work properly in. Without excessively comples measures being taken, it is nearly impossible to write one XHTML file which will embed multimedia correctly in both Internet Explorer and other browsers.

Here is the syntax to embed sound or video with the object tag in most browsers:

In the above example, FILENAME should be replaced with the name of the file to be loaded, and MIME/TYPE should be replaced with the apropriate MIME type for the file being loaded, to tell the browser what kind of plug-in to use for the file. Naturally, the height and width attributes should be set to apropriate values for the content being delivered. Here is a chart of a few possible MIME types, and the kind of files they belong to:

As mentioned previously, Internet Explorer does not use the correct standards for the object tag for embedding multimedia. Instead, we have to use an ActiveX object which allows us to connect to the Windows Media Player - here is the syntax for this:

Here, the object tag has a different set of required attributes, and the MIME type has been set to application/x-oleobject, instead of something relevant to the media being embedded. The only parts of this which need to be changed for different media are the FILENAME, and the height and width attributes. You should be especially careful never to change the IE-required classid and codebase attributes, as even the smallest error in them can not only cause your embedded media to not display properly, but you can actually cause serious errors on the user's computer. (See the ActiveX/VBScript tutorial for reasons why you need to be careful with these.)

Since everything is actually being sent through a single media playing plugin, Internet Explorer allows control over how that plugin is displayed through the use of additional parameters provided in the param tags inside of the object tag. They are treated much like any parameters that would be passed into a Java applet, and as empty tags should always be closed with /> at the end of the tag.

Here is an example of embeding audio the standards compliant way, followed by the somewhat different Internet Explorer way. Please examine both files in both browsers to properly understand how each browser deals with the different versions of the code.

Since the two code versions are mutually exclusive, we can not simply add the parameters for both versions into one tag. First of all, the two browsers disagree about the proper use of the type attribute, Netscape wanting it to point out what kind of media is being embedded, and Internet Explorer insisting that it call for an ActiveX object. The next problem is that the presence of the codebase and classid attributes will stop other browsers from displaying the files at all! A partial answer to this problem can be found through something that we should be including with our embedded multimedia anyways - our alternate content! (Remember, according to The W3 Web Content Accessibility Guidelines, parts 1.1 and 1.2, we need to have alternative content for any inline multimedia content!)

For our solution to the browser compatibility problem, we must now add yet another layer of complexity to our page - unfortunately, providing multimedia content on a web site that is genuinely browser independant (and therefore reaches the absolute maximum number of possible customers) is not a simple task. Since Internet Explorer will not under any circumstances properly display a page that is set up for other browsers, we must use Javascript to provide whatever browser has loaded the page with the version of the tags which is actually wants, as shown in this example. Remember however, that not all browsers support JavaScript! Some people intentionally turn off Javascript support in their browsers, or use text-only browsers like the lynx browser. Also, search engines tend to completely ignore everything inside of a script tag when indexing your content. This means that you should remember to include a noscript tag after the javascript's script tag, so that people who do not have Javascript will still recieve something on their page.

2: Video

2.1: Adding Video to images with DYNSRC

You can also add video to your web page easily by adding the the DYNSRC parameter to an image tag, and referencing a video file instead of a regular image. Here is an example. Again, this is a Microsoft Internet Explorer only tag, but viewing it in Netscape will not produce any errors, unless you attempt to access the additional properties added onto the image in a script.

Note that the image above has a few new parameters other than just the DYNSRC parameter - LOOP is just like with the BGSOUND tag, setting how many times the video file should repeat. The START parameter defines what event should cause the video file to begin playing. Possible values for this would be mouseover or fileload - if you do not use a correct value, or if you do not include this parameter, it will default to fileload.

Also, when you are including a video file in an IMG tag, make sure you include correct HEIGHT and WIDTH information in the tag, as some video files can be very large, and take quite a while to load - this would greatly slow down the display of your document if you do not already have the image sizes set.

2.2: Adding Video and Sound the old browser-independant way:

Now that we've covered the specialized, Internet Explorer only methods of adding video and sound, we can get to the much more versitile, and browser independant method which is actually part of the HTML 4 specification - the EMBED tag. The EMBED tag can not only be used to add sound and video to your page, it can also be used to include any other type of multimedia file or data which your viewer's web browser can handle, AND it's supported to some extent by both Netscape and Internet Explorer. Most multimedia files are handled in web browsers through the use of plug-ins, which the browser consults about how to handle the multimedia type in question. The EMBED tag tells the browser that it is about to recieve a file, and the browser then looks for the apropriate plug-in to display the embedded media. There is really only one major problem with using the EMBED tag - it was dropped from the XHTML standard after HTML 4.0, and thus will not pass through any kind of validation, and may not even be recognised by future browser releases. (Note that due to this tag only existing in HTML 4.0 and earlier, the case of the tag name and it's attributes are irrelevant.)

The basic format for the EMBED tag when used for video is the same as when used for audio files. Similarly, the Object tag works the same for audio and video files.