Chapter 13
Working with Multimedia and Plug-Ins
CONTENTS
"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.
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.
| Tip |
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.
|
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.
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.
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:
| Tip |
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.
| Note |
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>
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.
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:
navigator.plugins.refresh();
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.
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.
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.
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.
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
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."
| Q: | 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?
|
| A: | 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).
|
| Q: | 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?
|
| A: | 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.
|
| Q: | Is there any disadvantage to using plug-ins on my pages?
|
| A: | 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.
|
|