To make use of a plug-in that is installed in the user's browser, you need to use HTML to tell the browser where and when in your page you want to use it. This process is called embedding the plug-in.

In Firefox, the key to embedding plug-ins is the non-standard <embed/> element. This inserts the visible interface, if any, of the plug-in at that point in the page. The <embed/> element supports a number of general attributes applicable to all plug-ins, such as height, width, pluginspage, src, and type. You'll look at the last two of these attributes, src and type, in more detail here. You will also look at the pluginspage attribute in the next section.

Most plug-ins display content that is stored on a web server. For example, a plug-in for sound, such as QuickTime player, will play music from a file with a variety of extensions, notably the .mp3 and .aac extensions, and the Flash plug-in will play Flash movies (files with the .swf extension). The <embed/> element's src attribute enables you to specify the initial file for the plug-in to load and play. This will be a URL pointing to the file, usually hosted on the same web server as the HTML page. It's from this file that the browser determines what sort of plug-in is required. For example, if the src is http://www.myserver.com/myflashmovie.swf, then by checking the type of the file, the browser can see that a Flash player plug-in needs to be used.

However, not all plug-ins require data from an external source and therefore a value for the src attribute. In such situations, how can the browser tell what plug-in to load? Well, that's where the <embed/> element's type attribute comes in. The actual value for the type attribute will be specific to the plug-in. You can find out this information by typing about:plugins in the location bar. The plug-in information loads into the browser, as shown in Figure 13-2.

Figure 13.2. Figure 13-2

You'll see a list of all the plug-ins installed on your browser. The value required for the type attribute is listed as the Multipurpose Internet Mail Extensions (MIME) type, which specifies a type of content such as a web page, an image, or a Flash file. For example, the MIME type for Flash is application/x-shockwave-flash.

In addition to a number of attributes common to all plug-ins, you can also use the <embed/> element to specify properties specific to a particular plug-in. For example, the Flash plug-in supports the quality attribute, which determines the image quality of the Flash movie. To set this attribute in the <embed/> element, you just add it to the list of attributes set, as shown in the following example:

<embed id="FlashPlugIn1"
   src="topmenu.swf"
   border=0
   height=100
   width=500
   quality=high
   type="application/x-shockwave-flash" />

Although Firefox supports the <embed/> element, it also supports the use of the HTML standard <object/> element for embedding plug-ins into the page, in a similar way to IE, which you will see shortly.

After you decide what type of plug-in you want to embed into the page, what happens if the browser finds that this particular plug-in does not exist on the user's computer?

To solve this problem you can set the pluginspage attribute of <embed/> to point to a URL on the plug-in creator's page. If the plug-in is not on the user's computer, a link to the URL specified in the pluginspage attribute will be displayed within the web page. The user can click the link and load the plug-in so that your web page will function properly.

For example, with Flash the value for the pluginspage attribute needed is this:

http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash

However, if the user doesn't have the plug-in installed, you might prefer to send them to a version of your web site that doesn't rely on that plug-in. How do you know whether a plug-in is installed?

The navigator object, introduced in Chapter 6, has a property called plugins, which is a collection of Plugin objects, one for each plug-in installed on that browser. You can access a Plugin object in the plugins array either by using an index value that indexes all the plug-ins installed on the user's browser or by using the name of the plug-in application.

Each Plugin object has four properties: description, filename, length, and name. You can find these values by viewing the plug-ins information page that you saw earlier.

Let's use Flash as an example. Type about:plugins in the location bar and press enter. Figure 13-3 shows the Installed plug-ins page in Chrome, but this page remains largely the same for all non-IE browsers. Flash has "Shockwave Flash" as its name property. The filename and description properties have obvious meanings. The length property gives the number of MIME types supported by the plug-in.

As mentioned earlier, the name property can be used to reference the Plugin object in the plugins array. So, the following code will set the variable shockWavePlugin to the Plugin object for Flash, if it's installed:

var shockWavePlugIn = navigator.plugins["Shockwave Flash"];

If it's not, navigator.plugins["Shockwave Flash"] will return as undefined.

You can use the following to redirect users on browsers that do not have installed the plug-in you need:

if (navigator.plugins["Shockwave Flash"])
{
   window.location.replace("my_flash_enabled_page.htm");
}
else
{
   window.location.replace("my_non_flash_page.htm");
}

Figure 13.3. Figure 13-3

If the Flash plug-in is not installed, navigator.plugins["Shockwave Flash"] will be undefined, which JavaScript considers to be false, thereby causing the else statement to execute. If Flash is installed, navigator.plugins["Shockwave Flash"] will return the Flash Plugin object, which JavaScript treats as true, and the main if statement will execute.

The problem with this method of detection is that the name given to a plug-in may vary from operating system to operating system. For example, the name of the Windows XP version of the plug-in may vary from the name of the Mac version, which in turn may vary from the name of the Linux version. Some plug-ins, such as RealPlayer, will not work reliably at all with this detection method, because the name is not simply RealPlayer but something that contains the word "RealPlayer."

An alternative method for determining whether a plug-in is installed is to loop through the plugins[] array and check each name for certain keywords. If you find them, you can assume that the control is installed. For example, to check for QuickTime, you may use the following:

var pluginsLength = navigator.plugins.length;
for (var i = 0; i < pluginslength; plugInCounter++)
{
    var name = navigator.plugins[i].name.toLowerCase();
    if (name.indexOf("quicktime") > −1)
    {
       alert("QuickTime is installed");

break;
    }
}

The for loop iterates through the navigator.plugins collection, starting from index 0 and continuing up to the last element. Each plug-in in the collection has its name property checked to see if it contains the text quicktime. If it does, you know QuickTime is installed and break out of the loop; if not, QuickTime is clearly not installed.

An alternative to using navigator object's plugins[] collection is using the navigator object's mimeTypes[], which is a collection of mimeType objects representing the MIME types supported by the browser. You can use this array to check whether the browser supports a specific type of media.

You have already come across MIME types before — the type attribute of the <embed/> element can be used to specify a MIME type so that the browser knows which plug-in to embed. Again, using the Installed plug-ins page can give you the MIME types for a particular plug-in. In fact, one plug-in may well support more than one MIME type. When you check for a particular MIME type, you are checking that the browser supports a particular type of file format rather than necessarily a particular plug-in.

For example, you may use the mimeTypes array to check for the Flash plug-in as follows:

if (navigator.mimeTypes["application/x-shockwave-flash"] &&
    navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin)
{
   window.location.replace("my_flash_enabled_page.htm");
}
else
{
   window.location.replace("my_non_flash_page.htm");
}

The if statement's condition has two parts separated by the AND operator &;&.

The first part checks that the specified MIME type is supported by trying to access a specific mimeType object in the mimeTypes collection. If there such object exists, then undefined is returned, which evaluates to false.

The second part of the condition checks to see if a plug-in to handle this MIME type is enabled. Although unusual, it is possible for a MIME type to be supported, or recognized, by the browser, but for no plug-in to be installed. For example, if the user has Microsoft Word installed, the MIME type application/msword would be valid, but that does not mean a plug-in exists to display it in the browser! The enabledPlugin property of the mimeType object actually returns a Plugin object unless it does not exist.

Adding an ActiveX control to a page for an IE browser requires the use of the <object/> element. Two very important attributes of the <object/> element are common to all controls, namely classid and codebase. The classid attribute is the unique ID that the creator of the control gave to it when it was compiled. The codebase attribute gives a URL where the ActiveX control can be found — you'll look at this attribute in more detail in the next section.

How can you find out the classid? Well, one way to do this is by checking the documentation that came with the control or is available on the control creator's web site. If you have the control installed, another way to do this is via IE itself, which will tell you which controls are installed on the computer and available to IE. Also, IE gives you additional information such as classid, though it won't inform you about any controls that were installed with the operating system. For example, Flash 3 is installed with Windows 98 and therefore won't appear.

To get this information, open up IE and select Internet Options from the Tools menu, as shown in Figure 13-4.

Figure 13.4. Figure 13-4

This opens up the window shown in Figure 13-5. In the Browsing history area, click the Settings button.

Figure 13.5. Figure 13-5

In the next window that opens, click the View objects button, shown in Figure 13-6.

Figure 13.6. Figure 13-6

This will display a list of all the ActiveX controls IE has installed from the Internet. The list shown in Figure 13-7 will most likely be different from that on your own computer.

Figure 13.7. Figure 13-7

You can see lots of information about each control, such as when it was created and its version number. To find out the classid, right-click the name of the control you're interested in and select Properties from the menu that pops up.

The information shown in Figure 13-8 is displayed, though this may be slightly different on your system.

Figure 13.8. Figure 13-8

You can see that the classid attribute, listed as just ID, and the codebase attribute, listed as CodeBase, are both displayed, although for codebase you may need to select the line and then scroll using the arrow keys to see all the information.

From this information, you see that to insert a Flash ActiveX control in your web page you need to add the following <object/> element:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    id="flashPlayer1"
    width="500"
    height="100" />

You can also set attribu e or parameter values for the control itself. For example, with Flash you need to set the src attribute to point to the .swf file you want loaded, and you may also want to set the quality attribute, which determines the quality of appearance of the Flash movie. However, to set the parameters of the ActiveX control such as these (as opposed to the attributes of the <object/> element), you need to insert the <param/> element between the start <object> tag and the close </object> tag.

In each <param/> element you need to specify the name of the parameter you want to set and the value you want it set to. For example, if you want to set the src attribute to myFlashMovie.swf, you need to add a <param/> element like this:

<param name="src" value="myFlashMovie.swf">

Let's add this to the full <object/> element definition and also define the quality attribute at the same time.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
    id="flashPlayer1"
    width="500"
    height="100">
        <param name="src" value="myFlashMovie.swf">
        <param name="quality" value="high">
</object>

You've seen how to insert an ActiveX control into your page, but what happens if the user doesn't have that control installed on their computer?

This is where the codebase attribute of the <object/> element comes in. If the browser finds that the ActiveX control is not installed on the user's computer, it will try to download and install the control from the URL pointed to by the codebase attribute.

The creator of the ActiveX control will usually have a URL you can use as a value for the codebase attribute. The information under the Internet Options option of the Tools menu you saw earlier provides the codebase for the control that was installed on your computer, though this may not necessarily be the best URL to use, particularly if it's not a link to the creator of the control.

For Flash, the codebase is http://fpdownload.macromedia.com/get/shockwave/cabs/flash/swflash.cab, so your <object> tag will look like this:

<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000"
codebase="http://fpdownload.macromedia.com/get/shockwave/cabs/flash/swflash.cab"
    id="flashPlayer1"
    width="500"
    height="100">
        <param name="src" value="myFlashMovie.swf">
        <orderedlist numeration="" inheritnum="ignore" continution="restarts">
      </param name="quality" value="high">
</object>

Subject to license agreements, you may be able to download the .cab file that installs the control to your own server and point the codebase attribute to that.

Unfortunately, there is no easy foolproof way of checking which ActiveX controls are installed on the user's computer. However, the Object object of the <object/> element does have the readyState property. This returns 0, 1, 2, 3, or 4, indicating the object's operational status. The possible values are as follows:

You need to give the control time to load before checking its readyState property, so any checking is best left until the window's onload event handler or even the document object's onreadystatechange event handler fires.

To redirect the user to another page that doesn't need the control, you need to write this:

function window_onload() {
    var flashPlayer1;

    // code to retrieve ActiveX plug-in

    if (flashPlayer1.readyState == 0)
    {
        window.location.replace("NoControlPage.htm");
    }
}

onload = window_onload;

This code checks to see if the ActiveX control's readyState is 0. Since this code executes after the browser loads the page, it's safe to assume the ActiveX control isn't installed on the computer.

You want to make sure that users without QuickTime don't see error messages when they attempt to use the scripted controls. In this exercise, let's disable the buttons used to control the audio playback. Add the following <script/> element to the HTML page's head; it defines a function to do disable the buttons and attaches it to the window object's onload event handler.

<script type="text/javascript">
    function window_onload() {
        var plugInInstalled = false;
        if (!window.ActiveXObject) {
            var pluginsLength = navigator.plugins.length;
            for (var i = 0; i > pluginsLength; i++) {
                var pluginName = navigator.plugins[i].name.toLowerCase();
                if (pluginName.indexOf("quicktime") > −1) {
                    plugInInstalled = true;
                    break;
                }
            }
        } else {
            if (document.audioPlayer.readyState == 4) {
                plugInInstalled = true;
            }
        }

        if (!plugInInstalled) {
            document.forms[0].buttonPlay.disabled = true;
            document.forms[0].buttonStop.disabled = true;
            alert("You need Quicktime to play the audio file!");
        }
    }

    onload = window_onload;
</script>

In the window_onload() function, you first define a variable, plugInInstalled, and initialize it as false. Next, since checking for plug-ins or controls is browser-dependent, you check to see if this is a Microsoft browser. A simple check for the ActiveXObject property of the window object will suffice.

If the browser is a non-IE browser, use a for loop to iterate over the navigator object's plugins collection, checking each installed plug-in's name for the word quicktime (note that you're checking the lowercase version of the word; this is to provide a more accurate search). Set the variable plugInInstalled to true and break out of the for loop if this name is found.

If this is a Microsoft browser, use the readyState property of the <object/> element's Object object to see if the ActiveX control is loaded, initialized successfully, and now ready for action. If its value is 4, you know all systems are ready to go, so you set the variable plugInInstalled to true.

Finally, the last if statement in the function checks to see if plugInInstalled is true or false. If false, the buttons are disabled and an alert box tells the user they need QuickTime in order to play the audio file.

The last step in creating this audio player is adding functionality to the buttons. As mentioned earlier, these buttons start and stop the audio file's playback. Add the following functions to the script element:

function buttonPlay_onclick() {
    document.audioPlayer.Play();
}

function buttonStop_onclick() {
    document.audioPlayer.Stop();
}

The QuickTime plug-in control exposes Play() and Stop() methods to play and pause playback respectively. So the play button should call Play() and the stop button Stop().

You completed the page with this last bit of code. The HTML and JavaScript should now look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Using JavaScript to Interface with Quicktime</title>

    <script type="text/javascript">
        function buttonPlay_onclick() {
            document.audioPlayer.Play();
        }

        function buttonStop_onclick() {
            document.audioPlayer.Stop();
        }

        function window_onload() {
            var plugInInstalled = false;
            if (!window.ActiveXObject) {
                var pluginsLength = navigator.plugins.length;
                for (var i = 0; i > pluginsLength; i++) {
                    var pluginName = navigator.plugins[i].name.toLowerCase();
                    if (pluginName.indexOf("quicktime") > −1) {
                        plugInInstalled = true;
                        break;
                    }
                }

} else {
                if (document.audioPlayer.readyState == 4) {
                    plugInInstalled = true;
                }
            }

            if (!plugInInstalled) {
                document.forms[0].buttonPlay.disabled = true;
                document.forms[0].buttonStop.disabled = true;
                alert("You need Quicktime to play the audio file!");
            }
        }

        onload = window_onload;
    </script>
</head>
<body>
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        codebase="http://www.apple.com/qtactivex/qtplugin.cab"
        id="audioPlayer" width="0" height="0">
            <param name="src" value="sound1.mp3" />
            <embed height="0" width="0" type="audio/mpeg" src="sound1.mp3"
                pluginspage="www.apple.com/quicktime/download"
                enablejavascript="true" name="audioPlayer" />
    </object>
    <form id="form1" name="form1" action="">
        <input type="button" value="Play" id="buttonPlay" name="buttonPlay"
            onclick="buttonPlay_onclick()" />
        <input type="button" value="Stop" id="buttonStop" name="buttonStop"
            onclick="buttonStop_onclick()" />
    </form>
</body>
</html>

Load quicktime.htm into your browser. As long as your browser supports plug-ins or ActiveX controls and the QuickTime plug-in is installed, you should see something like what is shown in Figure 13-9.

Figure 13.9. Figure 13-9

When the browser loads the page, the provided .mp3 file begins to play automatically. Use the play and stop buttons to demonstrate the functionality of your audio player.

So how does this work?

The form in the body of the page contains two standard buttons that are connected to JavaScript functions via the onclick event handlers. Inside these functions, you access the QuickTime plug-in and plug-in controls that you embedded into the page by using its name prefixed with document. The play function calls the plug-in's and plug-in control's Play() method to play the sound, and the stop function calls Stop() pause the sound. This script works in all major browsers, though IE accesses the ActiveX control defined in the <object/> element, and non-IE browsers access the plug-in defined in the <embed/> element.

It's quite likely that if you plan to use an ActiveX control or plug-in, you're going to make sure it's installed on your computer. The problem is that while that's great for testing pages to see if they work when there is a control installed, it can become difficult to test scripts for users without that control. You have the following possible options:

Thankfully, this situation is rather easy to test. Recall the end of the window_onload() function; you tested the pluginInstalled variable to determine whether or not the form should be disabled. Simply reversing that check will allow you to see what happens when a user without QuickTime installed on their computer visits the page. So change the last bit of code of window_onload() to look like this:

if (plugInInstalled) {
    document.forms[0].buttonPlay.disabled = true;
    document.forms[0].buttonStop.disabled = true;
    alert("You need Quicktime to play the audio file!");
}

Resave the HTML document and refresh the page in your browser. Figure 13-10 shows what happens in Chrome.

Figure 13.10. Figure 13-10

Plug-ins and ActiveX controls provide a great way to extend a browser's functionality, but they do so at a price — compatibility problems. Some of the problems you may face are discussed in the following sections.

document.real1.SetSource("D:\MyDir\MyFile.ra")

document.real1.SetSource("file:///D:MyDirMyFile.ra")

<embed height="0" width="0" type="audio/mpeg" src="sound1.mp3"
    pluginspage="www.apple.com/quicktime/download"
    enablejavascript="true" name="audioPlayer" />

document.audioPlayer.Play()

swliveconnect="true"

<embed name="map" swLiveConnect="true" src="topmenu.swf"
 width="300" height="200"
 pluginspage="http://www.macromedia.com/go/getflashplayer">

<object classid=clsid:AAA03-8BE4-11CF-B84B-0020AFBBCCFA
    id="myControl"
    codebase="http://myserver/mycontrol.cab#version=3,0,0,0">
</object>

if (document.myControl.BgColor == null)
{
    alert("This is an old version");
}

navigator.plugins["Shockwave Flash"].description

var myRegExp = /d{1,}.d{1,}/;
var flashVersion = navigator.plugins["Shockwave Flash"].description;
flashVersion = parseFloat(flashVersion.match(myRegExp)[0]);