Lean CSS
Welcome to CSS
Introduction to CSS
CSS Syntax
Insert style sheet
CSS Background
CSS Text
CSS Font
CSS Border
CSS Margin
CSS Padding
CSS List
CSS Dimensions
CSS Classification
CSS Positioning
CSS classes
CSS elements
CSS2 Media Types
CSS Units
CSS Colors

Free Tutorials
Learn HTML
Learn CSS
Learn XML
Learn WML
Learn Access
Learn Data-VB
Learn Oracle
Learn SQL
Learn C++
Learn JavaScript
Learn Vbscript
Learn VisualBasic

Chapter 13

Working with Multimedia and Plug-Ins


"Multimedia" is probably the oldest buzzword in the computer industry, and its definition keeps changing. In the 80s, decent graphics and sound were enough to make a multimedia computer system. Now the term includes such things as CD-ROM, CD-quality audio, and full-motion video.

As far as the Web is concerned, multimedia generally means having more than the usual media-text and images-on your Web page. Alternate forms of media can be supported on a Web page in two key ways:

  • Helper applications are the traditional solution. These give a browser added capabilities, such as playing sounds or displaying video images. The file you link to is downloaded completely, then passed to the helper application.
  • Plug-ins are a new solution, developed by Netscape. These are custom applications that work within the browser, using a special programmer's interface (API). Using plug-ins, alternate media can be displayed directly in the browser window.

Although JavaScript is a simple language, it can work with multimedia. In this chapter, you'll explore what it can-and can't-do. You'll start with a look at sounds and their use in JavaScript, then continue with a discussion of plug-ins.

Using Sound in JavaScript

JavaScript doesn't include any special functions to play sounds. However, it's easy to force a sound to load and play in JavaScript. You can do this by setting the window.location.href property-the same thing you set when forcing the user to load another page.

The result is the same as if the user clicks on a link to the sound. The file is downloaded, and after the download is complete, the sound player application plays the sound.

By using this technique, you can play a sound at any time during the execution of your JavaScript application. This could be as an event handler, as an alternative to an alert message, or just to annoy the user.

Speaking of annoying the user, keep in mind that network connections aren't always fast. It's best to stick to small, easily downloaded sounds to keep things fast and smooth.

Configuring a Sound Player

Most of the recent versions of Netscape automatically install a helper application for sounds (.wav and .au files) called the Netscape Audio Player, or NAPLAYER.EXE. If you don't have a player configured, you can choose NAPLAYER.EXE from the NETSCAPE\PROGRAMS directory.

There is one problem with Netscape's audio player: it stays on top after it finishes playing the sound, so keep in mind that some users will have to close the Audio Player window after each sound is played. You may wish to recommend a sound player that exits after playing the sound; one program that does this is the shareware WPLANY.EXE.

Playing Sounds on Events

As an example of sounds in JavaScript, the application in Listing 13.1 uses events to trigger sounds. The example sounds used in this application are included on the accompanying CD-ROM.

Listing 13.1. (SOUNDS.asp) An application that plays sounds on various JavaScript events.
<HTML> <HEAD> <TITLE>Sounds on JavaScript Events</TITLE> <SCRIPT LANGUAGE="JavaScript"> function playsound(sfile) { // load a sound and play it window.location.href=sfile; } </SCRIPT> </HEAD> <BODY onLoad="playsound('zap.wav');" onUnload="playsound('click.wav');" > <H1>Sounds on JavaScript Events</H1> <HR> The following are some examples of JavaScript event handlers used to play sounds. You should have also heard a sound play when this page loaded; you'll hear another one when you unload this page. <HR> <a href="#" onClick="playsound('zap.wav');"> Click here for a sound </a> <FORM NAME="form1"> <INPUT TYPE="button" VALUE="Button to Play a Sound" onClick="playsound('click.wav');"> </FORM> </BODY> </HTML>

Figure 13.1 shows this example in action, complete with the Netscape Audio player. To truly appreciate it, though, you need to try it yourself-although your Web page can include sound, this guide can't.

Figure 13.1 : The output of the sound player example.

Overview: Netscape Plug-Ins

Plug-ins are a new alternative to helper applications, developed by Netscape for Navigator 2.0. There are currently a wide variety of plug-ins available for various types of files. Even Microsoft has gotten into the act; the latest version of Microsoft Internet Explorer (MSIE) also supports Netscape-compatible plug-ins.

Plug-ins are developed by third parties (or by browser developers, in some cases) using an API available from Netscape. The plug-in is able to use the resources of the browser and display its output within the browser window.

Here is a sampling of the plug-ins currently available, most at little or no charge:

I don't have room to list all the available plug-ins here; such a list could probably fill its own guide. See appendix C, "Online JavaScript Resources," for a list of online resources for plug-ins.

  • Adobe's Acrobat Plug-in (Amber) enables Portable Document Format (PDF) documents to be displayed in the browser window.
  • Macromedia's Shockwave plug-in enables Director movies and animations to be displayed inline.
  • The QuickTime plug-in displays QuickTime movies inline.
  • A wide variety of plug-ins support Virtual Reality Markup Language (VRML). This enables you to create interactive 3D sites. JavaScript can also work with VRML-see appendix C for a pointer to information about VRMLScript.
  • The ncompass plug-in, from ExCITE, enables Netscape to support ActiveX (OLE) controls. You'll learn about ActiveX in Chapter 18, "Using ActiveX and Microsoft Internet Explorer."
  • The RealAudio plug-in enables you to listen to real-time audio; the sound is played as it is downloaded. Netscape includes its version of this, LiveAudio, in the latest version.
  • The Pointcast (pcN) plug-in displays news stories, stock information, and press releases.

Plug-ins are not platform-independent. If a plug-in manufacturer wants to support multiple platforms, it has to create a separate version of the plug-in for each platform. Many plug-ins are available exclusively for Windows or for the Macintosh.

You can place a plug-in document in a Web page using the <EMBED> tag, an extension to HTML. For example, the following HTML tag inserts a PDF file at the current location in the page:

<EMBED SRC="doc.pdf">

For plug-ins that take up an area of the screen, such as video players and graphics, you can specify HEIGHT and WIDTH attributes to limit the size of the embedded object, as with an ordinary image. For example, the following PDF document is limited to a 200-by-100-pixel square:

<EMBED SRC="doc1.pdf" WIDTH=200 HEIGHT=100>

Plug-Ins and JavaScript

JavaScript enables you to work with plug-ins in a number of ways:

  • You can access the list of plug-ins installed on the user's browser.
  • You can check for a particular plug-in and modify the page accordingly.
  • You can generate a list of the available plug-ins or MIME types.
  • Using the LiveConnect features of Netscape 3.0, you can control a plug-in with JavaScript.

You'll look at each of these capabilities in the following sections.

Objects Related to Plug-Ins

The plug-in features were added in Netscape version 3.0 beta. Two objects are available, as children of the navigator object, that can give you information about plug-ins. All properties of these objects are read-only.

  • The navigator.plugins object is an array that contains information for each installed plug-in.
  • The navigator.mimeTypes object is an array with information about each of the MIME types currently supported.

These objects are explained in detail in the next sections.

The plugins Object

The navigator.plugins object is an array with one entry for each of the available plug-ins. You can find out how many plug-ins are installed with the expression navigator.plugins.length.

Each element of the plugins array is an object in itself, called a plugins object. The plugins object has the following properties:

  • name is the name of the plug-in.
  • filename is the executable file that was loaded to install the plug-in.
  • description is a description of the plug-in. The plug-in developer supplies this description.
  • mimeTypes is an array of mimeType objects, each representing a MIME type that the plug-in can handle. This works similarly to the navigator.mimeTypes object, described in the section, The mimeTypes Object, later in this chapter.

Refreshing the Plug-In List

The plugins object has a single method, refresh. This method enables you to update the installed plug-ins list without exiting Netscape. For example, if the user has installed a new plug-in, this will add it to the list. The syntax is simple:


You can add a single argument (true) to the refresh method to change its behavior. If the parameter is true, Netscape will also automatically reload any page that requires the plug-in.

This makes it possible for you to check for a plug-in and display a link to download
it if it is not installed. Your program can then refresh the plug-ins list and reload the page automatically. See the task later in this chapter for an example of checking for a plug-in.

The mimeTypes Object

The navigator.mimeTypes array contains an element for each MIME type currently supported by Netscape or by a plug-in. Each element of the array is a mimeType object, which includes the following properties:

  • type is the MIME type name, such as text/html or video/mpeg.
  • description is a description of the MIME type.
  • enabledPlugin is the name of the plug-in that is currently supporting the type.
  • suffixes is a listing of the extensions that can be used for documents of this MIME type.

LiveConnect: Controlling a Plug-In

Along with getting information about plug-ins, JavaScript can actually exercise some control over them. This is provided as part of LiveConnect, Netscape's system for communication between JavaScript, Java applets, and plug-ins.

In order for this to work, a plug-in developer must include LiveConnect features in the plug-in. These can allow the following:

  • The plug-in can have methods that JavaScript can call.
  • The plug-in can have properties that JavaScript can use or modify.

Because LiveConnect is in its infancy at this writing, there are few plug-ins that work this way yet. One example that has been announced is the LiveAudio plug-in, which ships with Netscape Navigator 3.0. This plug-in can play sounds, and you can control it with JavaScript. For example, this HTML tag embeds a sound:

<EMBED SRC="click.wav" NAME="click" VOLUME=100 HIDDEN=true AUTOSTART=false>

Once the sound is embedded, its methods become accessible to JavaScript:

  • document.click.play() plays the sound.
  • document.click.stop() aborts the playback.
  • document.click.stopall() aborts all currently playing sounds.

Watch this guide's Web site (listed in the introduction) for a full-scale JavaScript application that works with embedded sounds.

Listing Plug-Ins

Using the navigator.plugins object, you can easily make a program to display a list of currently available plug-ins. Listing 13.2 is such a program. The name, filename, and description for each plug-in are listed in a table.

Listing 13.2. (PLUGINS.asp) A program to list available plug-ins.
<HTML> <HEAD> <TITLE>List of Plug-Ins</TITLE> </HEAD> <BODY> <H1>List of Plug-Ins</H1> <HR> The following is a list of the plug-ins installed in this copy of Netscape, generated using the JavaScript navigator.plugins object: <HR> <TABLE BORDER> <TR><TH>Plug-in Name</TH> <TH>Filename</TH> <TH>Description</TH> </TR> <SCRIPT LANGUAGE="JavaScript"> for (i=0; i<navigator.plugins.length; i++) { document.write("<TR><TD>"); document.write(navigator.plugins[i].name); document.write("</TD><TD>"); document.write(navigator.plugins[i].filename); document.write("</TD><TD>"); document.write(navigator.plugins[i].description); document.write("</TD></TR>"); } </SCRIPT> </TABLE> </BODY> </HTML>

This program should be easy to understand. It uses the navigator.plugins.length property to determine the number of plug-ins. For each one, it displays table cells containing the properties. Figure 13.2 shows the list generated by this program.

Figure 13.2 : The list of available plug-ins as generated by the example program.

Listing MIME Types

Similarly, you can create a program to list the available MIME types on your system. Listing 13.3 shows a program that lists each type in a table along with its description, the plug-in that handles that type, and the suffixes used for that type of file.

Listing 13.3. (MIMETYPE.asp) A program to display a list of available MIME types and their properties.
<HTML> <HEAD> <TITLE>List of MIME Types</TITLE> </HEAD> <BODY> <H1>List of MIME Types</H1> <HR> The following is a list of the MIME types installed in this copy of Netscape, generated using the JavaScript navigator.mimeTypes object: <HR> <TABLE BORDER> <TR><TH>MIME Type</TH> <TH>Description</TH> <TH>Current Plug-in</TH> <TH>Extensions</TH> </TR> <SCRIPT LANGUAGE="JavaScript"> for (i=0; i<navigator.mimeTypes.length; i++) { if (navigator.mimeTypes[i].type.indexOf("zz") == -1) { document.write("<TR><TD>"); document.write(navigator.mimeTypes[i].type); document.write("</TD><TD>"); document.write(navigator.mimeTypes[i].description); document.write("</TD><TD>"); document.write(navigator.mimeTypes[i].enabledPlugin); document.write("</TD><TD>"); document.write(navigator.mimeTypes[i].suffixes); document.write("</TD></TR>"); } if (i > 55) break; } </SCRIPT> </TABLE> </BODY> </HTML>

This program works in the same fashion as the previous example. It iterates through the navigator.mimeTypes array and displays the properties for each type. The list generated by this program is shown in Figure 13.3.

Figure 13.3 : The list of available MIME types as generated by the example program.

Testing for a Plug-In

Often, all you need to do with JavaScript is decide whether to attempt to display a plug-in document. You can check for support of the required plug-in, and if it isn't found, you can insert alternate content, or simply advise the user that the plug-in is needed.

For example, this code checks for the Shockwave plug-in. If it's installed, the Director movie is embedded in the document; otherwise, a message about the plug-in is displayed.

test = navigator.plugins["Shockwave"]; if (test) document.writeln("<EMBED SRC='test.dir' HEIGHT=50 WIDTH=100>") else document.writeln("The Shockwave Plug-in is required for this part of the page.")

You are simply displaying a message that the plug-in is required. As noted earlier, you could also provide a link to download the plug-in, then use the refresh method of the plugins object to add it to the plug-ins list and reload the document.

Workshop Wrap-Up

You should now understand how to use JavaScript to work with multimedia. You've learned the following:

  • The difference between helper applications and plug-ins
  • How to use JavaScript to play sounds on events
  • The basics of the plug-in standard
  • The plug-ins included with Netscape 3.0 and their uses
  • Using JavaScript to detect or list plug-ins
  • Accessing the list of available MIME types

Next Steps

Continue your studies of JavaScript with one of the following:

  • To add dynamic images and simple animation to your multimedia Web page, see Chapter 12, "Working with Graphics in JavaScript."
  • To learn about common errors in JavaScript programs and how to avoid them, see Chapter 14, "Debugging JavaScript Programs."
  • For an example of a large-scale JavaScript application, see Chapter 15, "Real-Life Examples III."
  • To learn to further enhance your Web pages with Java, see Chapter 16, "Integrating JavaScript with Java."


If users don't have a plug-in that my page requires, is there any way to make their browsers automatically download and install it?
Not presently, and this probably won't be a JavaScript feature in the future. However, Netscape is considering a similar feature to be built in to a future version of Navigator (probably version 4.0).
Is there any possibility of true integration of JavaScript with plug-ins-for example, being able to add event handlers to parts of a video image or PDF document?
Not at present, and trying to do this would open quite a can of worms for Netscape-particularly because each of the plug-in vendors would have to add JavaScript support.
Is there any disadvantage to using plug-ins on my pages?
Yes. First of all, you'll be restricting the page to users of plug-in compatible browsers; second, they will need the plug-in itself installed. Many users will consider this too much work just to view one Web page.

|  About us | Categories | New Releases | Most Popular | Web Tutorial | Free Download | Drivers |

2013 Softlookup Corp. Privacy Statement