Adding a Plug-In to the Page

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

In Netscape Navigator the key to embedding plug-ins is the <embed> tag. This inserts the visible interface, if any, of the plug-in at that point in the page. The <embed> tag supports a number of general attributes applicable to all plug-ins, such as height, width, pluginspage, src, and type. We'll look at the last two of these attributes, src and type, in more detail here. We 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 Real Audio, will play music from a file with the .ra extension, and the Flash plug-in will play Flash movies, that is, files with the .swf extension. The <embed> tag's src attribute allows us 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 was 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> tag's type attribute comes in. The actual value for the type attribute will be specific to the plug-in. We can find out this information by opening up Netscape and selecting the About Plug-ins option from the Help menu, as shown in Figure 15-2.

Figure 15-2

This will show a list of all the plug-ins installed on our browser. The value required for the type attribute is listed as the Mime Type, which stands for Multipurpose Internet Mail Extensions and 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, we can also use the <embed> tag 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> tag, we 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"
</embed>

Checking For and Installing Plug-Ins in Netscape

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

To solve this problem we can set the pluginspage attribute of the <embed> tag 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 on the link and load the plug-in, so that our web page will function properly.

For example, with Flash the pluginspage attribute needed is

PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version
=ShockwaveFlash">

However, if the user doesn't have the plug-in installed, we might prefer to send her to a version of our website that doesn't rely on that plug-in. How do we know whether a plug-in is installed?

The navigator object, which we introduced in Chapter 5, has a property called plugins, which is an array of Plugin objects, one for each plug-in installed on that browser. We 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. Note that for IE, navigator.plugins is always empty.

Each Plugin object has four properties: description, filename, length, and name. We can find these values by looking at the About Plug-ins option on the Help menu in Netscape.

Let's use Flash as an example. Click the About Plug-ins option on the Help menu, which will show a list of the plug-ins installed on your browser. As shown in Figure 15-3, we can see that Flash has Shockwave Flash as its name property. The filename and description properties have quite obvious meanings. The length property gives the number of Mime Types supported by the plug-in.

Figure 15-3

As I mentioned, the name property can be used to reference the Plugin object in the plugins array. So, in NN, the following code

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

will set the variable shockWavePlugin to the Plugin object for Flash, if it's installed. If it's not, navigator.plugins["Flash"] will return as undefined.

We can use the following to redirect users on browsers that do not have the plug-in we need installed.

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

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 Apple Mac's 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." For example, on my Windows 2000 system with Netscape 4.73, the name is "RealPlayer^™ G2 LiveConnect-Enabled Plug-In (32bit)"—something of a mouthful. This varies not only with the browser version and operating system, but also with the RealPlayer version.

An alternative method for checking that a plug-in is installed is to loop through the plugins[] array and check each name for certain keywords. If they are found, we assume that the control is installed. For example, to check for RealPlayer, we may use the following:

var plugInCounter;
for (plugInCounter = 0; plugInCounter < navigator.plugins.length;
   plugInCounter++)
{
   if (navigator.plugins[plugInCounter].name.indexOf("RealPlayer") >= 0)
   {
      alert("RealPlayer is installed");
      break;
   }
}

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

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

We have already come across MIME types before—the type attribute of the <embed> tag can be used to specify a MIME type so that the browser knows which plug-in to embed. Again, using the About Plug-ins option on the Help menu, we can find out what the MIME types are for a particular plug-in. In fact, one plug-in may well support more than one MIME type. When we check for a particular MIME type, we are checking that the browser supports a particular type of file format rather than necessarily a particular plug-in.

For example, we 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 is the important thing here. Its 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 array. If there is no such object, then undefined is returned, which as far as an if statement goes, works the same as if false is returned.

The second part checks to see not only that the MIME type is supported, but also that 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 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 an NN browser! The enabledPlugin property of the mimeType object actually returns a Plugin object, but again if it does not exist, null will be returned, which will be considered as false by the if statement.

What happens if someone browses to our page with a browser that has no support at all for plug-ins?

Well, basically the <embed> tags will be ignored, and if the browser does support script, errors will occur if we access the plug-in through our script. To get around this, NN supports the <noembed> tag. Anything in between the opening <noembed> tag and the closing </noembed> tag is ignored by any version of NN that supports the <embed> tag, so we can put a message in there telling users that the page requires a browser that supports plug-ins.

<noembed>
   <h2> This page requires a browser that supports plug-ins </h2>
</noembed>

We can also use object checking to avoid errors with different browser versions.

if (document.embeds && document.embeds[0])