|
In Chapter 9, "External Files, Multimedia, and Animation," you learned all about external media and helper applications. Although a few forms of inline media were available, most of the media I talked about in that chapter was stored externally and viewed via helper applications.
In this chapter you'll learn about embedded objects, an advanced mechanism for including various forms of media and programs inside a Web page. The largest support for embedded objects right now is in Netscape 2.0, which has a framework for allowing plug-in applications to play embedded objects of varying media types. But other embedded object mechanisms are on the horizon.
In particular you'll learn about Netscape's plug-ins. Topics to think of today include:
An embedded object is a media file that is played inline in a Web page. In fact, you could consider embedded objects in their most general form as simply another word for inline media.
Embedded objects usually refer to multimedia files, documents in special file formats, or small programs such as Java applets. Because embedded objects usually do something-play an animation or a sound or react to user input such as mouse clicks-embedded objects are often referred to as live objects.
| New Term |
An embedded object is a media file, document, program, or any other thing that can be played, displayed, executed, or interacted with inline on a Web page. |
To play embedded objects, you'll need a browser that supports embedded objects, and you'll need software to play those objects. In some cases, the software may be already supported by the browser itself (for example, Java applets), or you may need to download a program called a plug-in to handle that new media file.
Netscape 2.0 supports the concept of plug-in applications that can be used to play embedded objects. Prior to using plug-ins, Netscape used the helper application method that all browsers use to play media types that it itself did not support.
Although helper applications go a long way toward allowing the browser to support a wide variety of media while remaining small and fast, there are several problems with helper applications. First of all, helper applications run entirely separately to the browser itself, so the media being played is run in a separate window on a separate part of the screen (and, on small screens, the media may be running behind the browser window). The second problem with helper applications is that because the application is entirely separate from the browser itself, it's difficult to communicate back to the browser. So, for example, if you had a special file format that allowed hypertext links similar to HTML, you could download and run files in that format using a helper application, but when you selected one of those special links, it would be difficult to actually tell the browser to load that link on the behalf of the helper application.
Plug-ins were intended to solve both those problems. Plug-ins are helper applications that are integrated with the browser so that instead of an embedded media file being downloaded and then handed off to the helper, that file is downloaded and played on the Web page inline with the rest of the Web page's contents.
| New Term |
Plug-ins are programs that allow embedded objects to be played or viewed inline as opposed to downloaded and played or viewed externally to the browser. |
| Note |
Plug-ins are currently supported only in Netscape 2.0 for Windows and Macintosh. Netscape 3.0 will have plug-in support on UNIX as well. In addition, Internet Explorer 3.0, which is available in alpha for Windows 95 as I write this, has support for Netscape plug-ins. Other browsers will most likely support plug-ins in the future as well. |
Since plug-ins were initially introduced, a number of companies have developed their own plug-ins to support a wide variety of file formats, media types, multimedia, and VRML files. For the rest of this section I'll provide a survey of some of the more popular plug-ins available.
Adobe Acrobat files are created by the Adobe Acrobat program and are stored in a file format called PDF. PDF stands for Portable Document Format; it's a way to represent a page with all its layout and fonts intact on multiple platforms. For example, if you write a complex brochure in Quark Express with multiple columns, fonts, colors, and other nifty tidbits, converting it to HTML will lose most of that formatting (to say the least). But, using Acrobat, all you have to do is print it to PDF, and when you view the resulting file, it will look just like it did in its original form. Also, you can create hypertext links within PDF files to move from page to page, index the files, create entities similar to tables of contents, or search them for keywords. Rumor has it that future versions of Acrobat will even allow links to and from HTML pages on the Web.
The Adobe Acrobat reader is available for free from Adobe, and it can be installed as a helper application in any browser. Adobe also provides Amber, the plug-in version of the Adobe Acrobat reader, which allows you to view and navigate PDF files inside a Web browser window (see Figure 26.1).
Figure 26.1 : An Adobe Acrobat file.
Amber is available for Windows (all flavors) and Macintosh. The regular Acrobat Reader helper application is also available for UNIX. Find out more about Amber at http://www.adobe.com/Amber/Index.html.
| Note |
At the time I write this, Adobe Amber is in Beta release. |
To create PDF files suitable for viewing by either the reader or by Amber, you'll need the Adobe Acrobat package, a commercial product for Mac, Windows, and UNIX. Some applications such as PageMaker may also have PDF capabilities built into them. Find out about Adobe Acrobat in general from http://www.adobe.com/Acrobat/overview.html.
I mentioned Macromedia's Shockwave plug-ins briefly in Chapter 9. The Shockwave plug-ins are tools that allow various Macromedia media files (Authorware, Director, Freehand) to be played inline in a Web page. Most of the time, the term Shockwave refers to media presentations created using Macromedia Director. As I mentioned earlier, Director is the leading tool in the multimedia CD-ROM industry for creating animation and interactive presentations and games. Figure 26.2 shows a simple Shockwave for Director animation playing in a Web page at http://computalk.com/compushock/compushock.html (the big book-like thing in the middle is actually rotating).
Figure 26.2 : A Shockwave for Director animation.
To view Shockwave files, you'll need the Shockwave plug-in, which is available for Mac and Windows from http://www-1.macromedia.com/Tools/Shockwave/Plugin/plugin.cgi. To create Shockwave animation or presentations, you'll need Macromedia Director (a commercial product) and the AfterBurner tool that converts Director files to Shockwave format and compresses them for faster loading over the net. You can find out more about Shockwave and AfterBurner and how to convert Director files to Shockwave from the Shockwave for Director Developer's Center at http://www.macromedia.com/Tools/Shockwave/Director/index.html. You can find out more about Director from http://www.macromedia.com/Tools/Director/.
Later in this chapter we'll use Shockwave as an example for how to create a small animation on a Web page.
RealAudio is a special audio format that has been optimized for playing on slow modem connections (14.4 and 28.8). The RealAudio system also allows audio files to be streamed, that is, to play as they're being downloaded. Most audio or other media files have to be fully downloaded before they can be played.
The RealAudio player is available as a helper application or a plug-in for Windows, Macintosh and UNIX. Both tools provide buttons for controlling the audio file as it's being played (starting and stopping, setting volume, and so on), but the plug-in allows those controls to be inserted in their own places on the Web page. Figure 26.3 shows a RealAudio file being played inside a Web page.
Figure 26.3 : A RealAudio File.
To create and distribute Real Audio files on your own Web pages, you'll need tools from Real Audio including a converter to translate common audio file formats into the Real Audio format, and a special server that runs on your Web server and allows the audio to be streamed to the browser. Find out more about the Real Audio system from http://www.realaudio.com/ (Real Audio's home page) and about the Real Audio Player from http://www.realaudio.com/products/ra2.0/.
One of the most common uses for plug-ins is for playing various forms of multimedia files inline on Web pages. Audio, video, animation, all of these things have a wide variety of plug-ins available, including these plug-ins:
| Note |
This is only a partial list of available plug-ins. Netscape maintains a full list of available plug-ins at http://home.netscape.com/comprod/products/navigator/version_2.0 |
VRML stands for Virtual Reality Modeling Language. VRML, often pronounced "vermil" by its proponents, is a language to describe explorable multiuser 3D spaces (or worlds) contained and distributed over the World Wide Web. The idea behind VRML is to provide a visual and perceptual interface to the World Wide Web. Instead of jumping from page to page by following links, you would wander from room to room on the Web, and encounter and interact with other explorers and objects in those worlds. Figure 26.4 shows a view of a simple world created in VRML.
I don't have nearly the space in this chapter to discuss VRML; whole books have been written on that topic. If you're interested in learning more, probably the best place to start is the VRML Repository at http://www.sdsc.edu/SDSC/Partners/vrml/.
To explore VRML worlds over the Web, you'll need either a VRML-enabled browser or a VRML plug-in for Netscape. If you're using a plug-in, several plug-ins are available, all of which work only on Windows 95 and Windows NT. Check out these plug-ins:
Interested in including embedded objects on your own pages using plug-ins? Here's how to find out how to do it. There are essentially two major steps: creating the media file and adding a special tag to your Web pages. Some plug-ins, however, may also require you to configure your server for their new media content-type.
To embed an object in a Web page, you need an object to embed. This means actually having the file you want to view or play using a plug-in available to you. For sound and video files, you may already have the tools to create or convert the files into the right format; for some advanced embedded objects such as Acrobat or Shockwave, there are tools you must buy from the manufacturers of that media in order for you to be able to create the media itself.
Each media file differs in how it is created and what you can do with it if it's intended for the Web. See the Web pages for the plug-in maker for information on creating media files.
Also, most of these embedded objects have special extensions for special content-types. Although you may have seen many of the extensions before in this book, many others will be new. Make sure you know what extension you're supposed to be using for your media files.
The secret to embedding objects in Web pages using Netscape is in the <EMBED> tag, a Netscape extension that indicates an object is an embedded object to be played or viewed by a plug-in if one is available.
The <EMBED> tag is one sided and has three attributes you'll use most of the time. The SRC attribute is the pathname or URL to the media file, just as if it were an image or an external media file. The other two tags are WIDTH and HEIGHT for the dimensions of the embedded object's bounding box-again, just as if this were an image you were including on the page.
So, for example, to include a QuickTime movie file as an embedded object, you would use this tag:
<EMBED SRC="mymovie.mov" WIDTH=120 HEIGHT=180>
Embedded objects appear on their own lines, centered on the page.
The <EMBED> tag also has several optional attributes, which vary from plug-in to plug-in, that are used to control how the media is played or to set other options in the plug-in itself. These parameter attributes have the name of the parameter and the value for that parameter. So, for example, a QuickTime plug-in might have the parameter LOOP=TRUE, or a plug-in to produce a marquee à la Internet Explorer might have parameters for the text (BANNER="This is a Marquee"), the speed (SPEED=30), or for some other options. Check with your plug-in manufacturer to see what parameters they support.
The third step is to make sure you have the plug-in software available to play the media type you're embedding. If you don't already have it, you'll need to download and install the plug-in itself before you can test to see if your embedded objects work.
Plug-ins go into your Netscape folder, into a folder named, appropriately, plug-ins (in Windows it's called plugins and is in the Program folder). All you need to do is put the plug-in software in that folder, restart Netscape, and you're all set. Now you should be able to open your HTML files containing the embedded objects, the plug-in will load, and the object will play.
After you're sure everything works on your local disk, it's time to upload it all to your server. But, depending on what kind of embedded object you use, you may need to do a couple final steps: you may need to configure your server to understand that content-type, and you may need to install special server software.
The former is usually the most common; if you're using a new media type or an old server, or both, you may need to explicitly tell your server about the new media type. Probably the best way to figure out if you need to do this is to actually upload everything to your server and try it. If Netscape gets really confused and starts insisting that your embedded object is of type text/plain or something equally bizarre, you've got some server configuration ahead of you.
Most plug-in manufacturers will give you information about what
kind of media type they use and the file extensions that go with
it. Table 26.1 presents a list of the more popular embedded object
content-types and their file extensions (a few of these you've
seen before; others might be new to you).
| Type of File | Content-type | Extension |
| AU audio | audio/basic | .au |
| AIFF audio | audio/x-aiff | .aiff, .aif |
| WAV/WAVE audio | audio/x-wav | .wav |
| RealAudio audio | audio/x-pn-realaudio-plugin | .rpm |
| Real Audio (regular) | audio/x-pn-realaudio | .ra, .ram |
| MPEG video | video/mpeg | .mpg, .mpeg |
| QuickTime video | video/quicktime | .mov, .qt |
| AVI Video | video/x-msvideo | .avi |
| Acrobat (PDF) | application/pdf | |
| Director (shockwave) | application/x-director | .dcr, .dir, .dxr |
| VRML Worlds | x-world/x-vrml | .wrl |
How you set up these content-types varies from server to server. Sometimes you'll have a configuration file to edit, or a dialog box to modify. Check with your server documentation or Webmaster, and remember to restart your server after you've made the changes.
The second thing you might have to do with your server is install special software to support the embedded object. Real Audio and many forms of streaming video files will require this. See the documentation that comes with that embedded object type to see if you'll need to do this.
Plug-ins put a lot of demands on your readers. That reader has to have a browser that supports plug-ins (right now Netscape is the only one, and primarily Netscape for Mac and Windows at that), and for every media type you want to use, they have to download the software to run it.
If readers with the right browser but not the right plug-in come across your page, they'll get an error message and the ability to get information about the plug-in they have to download to view your media. Your page will appear with a broken puzzle-piece icon where the media was supposed to appear (see Figure 26.5).
Figure 26.5 : A missing plug-in icon.
If a browser without plug-in support comes across your page, readers won't see anything; the <EMBED> tag will be completely ignored, and the browser will merrily continue on the HTML further on in the page. To provide an alternative to an embedded object, Netscape provides the <NOEMBED> tags.
<NOEMBED>, like <NOFRAMES>, provide HTML content for browsers that don't understand object embedding using <EMBED>. Browsers that do support object embedding will ignore everything in between the <NOEMBED> tags; browsers that don't will go ahead and display it.
Use <NOEMBED> to provide optional ways of displaying or playing the media type you had intended to embed, for example:
Here's an example of a simple audio file. With object embedding, this file would be played with a plug-in that had some sort of controls (start, stop, and so on). With <NOEMBED>, you can just use an external media file:
<EMBED SRC="quackquack.aiff" WIDTH=50 HEIGHT=30>
<NOEMBED>
<P>Ducks are quacking in this
<A HREF="quackquack.aiff>sound sample</A> (AIFF, 30K)</P>
</NOEMBED>
One of the more popular uses of plug-ins is for Shockwave animation. Shockwave is the name for a family of plug-ins from Macromedia that allow you to view or play files created by Macromedia Authorware, Macromedia Director, and Macromedia Freehand. Usually, however, the term shockwave is used to refer to Director animation.
As I mentioned in Chapter 9, Macromedia Director is the probably the most popular tool for creating multimedia CD-ROMs and other presentations. The Shockwave plug-in, available (unfortunately) only for Macintosh and Windows systems, allows Director files to be played and interacted with inside a Web page.
To create Shockwave animation, you'll need four things:
In this example we'll take a Director animation, convert it to a Shockwave for Director file, and include it on a Web page. The animation in question is a very simple Director animation of a set of paw prints tracking across the screen, one at a time. Figure 26.6 shows the animation playing in Director for the Mac. I created this animation in Director in about half an hour.
Figure 26.6 : A simple Director animation.
| Note |
Director presentations by default are displayed on a screen called the stage. By default, the stage is a pretty good-sized chunk of screen (usually 640×40 pixels). To create Director presentations for use in a Web page, you'll want to change the size of the stage so that it is no larger than you want the animation on your Web page to be. So, if your animation is going to have a bounding box no bigger than 100×100, make sure your stage is that size. Use the Preferences menu item from the File menu to change the size of the stage. |
Once you have a Director animation saved as a director file, the next step is to run a program called AfterBurner to compress the Director file and convert it into a Shockwave file. On the Macintosh, all you need to do is drag-and-drop your Director files onto the AfterBurner icon, and AfterBurner will prompt you for a new name for the file, ending with .dcr (make sure it does indeed have a dcr extension). My paw prints animation is called pawprints.dcr.
The next step is to create a Web page to contain this embedded object. Here I've created a very simple headline framework:
<HTML>
<HEAD>
<TITLE>Pawprints, Inc.</TITLE>
</HEAD>
<BODY>
<H1>Pawprints, Inc.</H1>
<H2>Tracking and Searching on the Internet</H2>
<HR>
</BODY>
</HTML>
To add the Shockwave animation, add the EMBED
tag with the SRC attribute
pointing to
the .dcr file (in the same
directory as the HTML file), and the width and height 640×30,
like this:
<EMBED SRC="pawprints.dcr" WIDTH=640 HEIGHT=30>
For browsers that don't understand the <EMBED> tag, you'll want to add a set of <NOEMBED> tags with alternative content. Here, the best idea I had for alternative content was a non-animated image of those same paw prints as a GIF file, like this:
<NOEMBED>
<IMG SRC="pawprints.gif" WIDTH=640 HEIGHT=30
ALT="* * * * * * * * * * * * * * * * * * * * *">
</NOEMBED>
You can now test this on your local disk if you have the Shockwave
plug-in installed. If you don't, you'll have to get it from Macromedia's
Web site and install it into Netscape's
plug-ins folder (see the
Netscape directory on your
hard drive). Make sure you quit and restart Netscape so the plug-in
will be recognized.
And now, the moment of truth. Load up that HTML file with the embedded Shockwave file. You should see a message at the bottom of your screen that says "Loading plug-in" just before the animation is displayed. Figure 26.7 shows the paw prints animation playing in a Netscape window.
Figure 26.7 : The paw prints animation inline.
The final step is to upload your HTML and Shockwave files to the server, just as you would your regular files. However, as part of that final step, you'll also have to configure your server to understand Director files. To do this, you'll have to edit a configuration file or open a dialog-see your server's documentation. The option you're looking for is one to add content-types or MIME types. To that configuration you're going to add three file extensions: .dcr for Shockwave director files, .dir for plain uncompressed Director files, and .dxr for "protected" Director files (protected files can be created specially by Directory itself). All three of these extensions map to the content-type application/x-director. So, for example, the configuration for an NCSA-type server would be to edit your srm.conf file and add the following lines:
AddType application/x-director .dcr
AddType application/x-director .dir
AddType application/x-director .dxr
Don't forget to restart your server after making the changes. And now you're all set! You or anyone else will now be able to view your HTML pages with embedded Shockwave animations and, as long as they have the plug-in, will see your animations in all their glory.
For most of this chapter, I've discussed embedded objects using plug-ins as currently supported by Netscape and as will be supported by other browsers in the future. In addition to plug-ins, however, there is one other method of embedding objects in Web pages worth mentioning: Microsoft's forthcoming ActiveX technology, which its Internet Explorer browser will support in the near future (it's in alpha as I write this and will most likely be available by the time you get this book).
ActiveX consists of two kinds of embedded objects: Active Controls, which are downloadable programs like Java applets, and Active Documents, which are embedded documents such as Acrobat (but are more typically word processor or spreadsheet documents). ActiveX is similar to, but a superset of, Microsoft's OLE mechanism for distributed and embedded objects. As with plug-ins, ActiveX controls and documents can be embedded and downloaded in Web pages. Unlike plug-ins, however, they won't require you to have separate software for each one. The ActiveX technology is more similar to Java in the sense that each ActiveX object is self-contained, so each control or document has enough to play or run itself.
Is ActiveX Microsoft's answer to Java? It's more of an answer to the same question Java is answering: how to embed runnable programs in Web pages. And, in fact, Internet Explorer will also support Java and Netscape plug-ins in the same future version that ActiveX is scheduled to appear in, and so all these different kinds of embedded objects will be available to readers using those browsers. And, finally, Microsoft has also announced a scripting language to tie it all together: Visual Basic Script, which will allow ActiveX objects to communicate with each other and with Java objects as well. A development tool called Jakarta is also in development that will let you create Java applets and applications and ActiveX controls.
At this time, ActiveX is available only in an alpha developer's version for Windows 95 and NT. There is also currently a plug-in for Netscape as well which can handle ActiveX controls and documents from a company called Ncompass. You can download and try it out from Ncompass's home site at http://www.ncompasslabs.com/binaries/download_plugin.html.
Microsoft has also contracted with other companies to port it to Mac and UNIX, so ActiveX will become more interesting for cross-platform embedded objects as time goes on. Keep an eye out for it in the future.
Between plug-ins, Java, ActiveX, Internet Explorer's extensions to images to support AVI, and who knows what else, it seems like everyone who's developed a browser has come up with their own way of inserting embedded objects and inline multimedia into Web pages. In an attempt to try and come up with a single solution that works for everything, the W3 Consortium has a group working on an extension to HTML: the <OBJECT> tag. The OBJECT working group includes representatives from Netscape, Sun Microsystems, Microsoft, and the W3C itself.
The <OBJECT> tag provides a single generic way of including multimedia and other embedded objects into a Web page. <OBJECT> includes the ability to include various forms of media files (MPEG, audio files, Shockwave/Director files) as well as runnable programs such as Java applets or ActiveX controls. So, for example, to include a video file inline one a Web page, you might use <OBJECT> like this:
<OBJECT DATA="flowers.avi" TYPE="video/avi" WIDTH=100 HEIGHT=100>
<IMG SRC="flowers.gif" WIDTH=100 HEIGHT=100 ALT="[flowers]">
</OBJECT>
To include a Java applet, you might use this <OBJECT> tag:
<OBJECT CLASSID="java:colorapplet/main"
CODEBASE="http://myserver.com/javastuff/"
WIDTH=400 HEIGHT=500>
[there would be a color applet here if your browser
supported Java]
</OBJECT>
Note in both these examples the alternative text or HTML in between the opening and closing <OBJECT> tags. This allows you, as a Web page designer, to include a suitable alternative for embedded objects in case the browser does not support them or does not have the appropriate software to view it.
If an object requires parameters, as with Java applets, the <PARAM> tag can be used to include those parameters. <PARAM> works identically to how it works with Java applets: the NAME and VALUE attributes contain parameter names and values to be passed to the object.
So who supports <OBJECT>? No one does, at the moment-<OBJECT> is still just a proposal from the W3C which is still in development. However, it is assumed that since many major browser manufacturers and players in the browser and embedded-object market are on the working group, their respective companies will provide support for <OBJECT> in the near future. Microsoft has already announced that their ActiveX controls and documents will be embeddable using the current <OBJECT> definition and viewable using Internet Explorer. Similar announcements will no doubt be forthcoming.
Embedded objects bring external media inline. In their most general form, they take files and programs that would normally be played outside the browser and allow them to be played, edited, and interacted with as if they were an integral part of the browser itself. Embedded objects include things such as Java applets, but most usually refer to media files and new file types.
Right now the most widely used form of embedded objects are objects that can be viewed or played with plug-in software. Plug-ins are a Netscape feature; to play an embedded object, you have to download the plug-in software for that object and install it in your Netscape directory. After that, it all works seamlessly: if you run across a page with that special media embedded on it, Netscape will launch the plug-in and the object will play.
A wide variety of plug-ins exist for Netscape on different platforms, many of them for common media types such as audio and video and for other media such as Adobe Acrobat and Macromedia Authorware, Director, and Freehand files. VRML worlds, which allow you to move around and interact in 3D visual spaces, also make very popular embedded objects, and quite a few plug-ins support them.
To include embedded objects playable by plug-ins in your Web pages, use the <EMBED> tag. For browsers that don't support embedded objects, you'll want to include the <NOEMBED> tag as well to provide an alternative.
| Q | I'm a developer, and I want to write my own plug-ins. How can I find out more? |
| A | Netscape has information and documentation about how to create plug-ins on their home site, as well as a Software Development Kit for Mac and Windows to help develop plug-ins. See the information at http://www.netscape.com/comprod/development_partners/plugin_api/. |
| Q | I created a Shockwave animation that's 300×30 pixels. I did the AfterBurner thing, created an HTML page with the <EMBED> tag, and fired it up in Netscape. All I have is a blank space. It pauses as if it's playing, but nothing appears on the page. |
| A | Did you make sure your original Director movie was 300×30 pixels? You have to change the size of the stage (the main Director screen) to the size of the final Shockwave animation. |
| Q | I set up my director animations to loop, but the final Shockwave animation plays once and then stops. How do I get my animations to loop? |
| A | Well, first, keep in mind that animations are often distracting, and a continually looping animation can be annoying. That said, the only way to make sure your Shockwave animation will loop is to add a Director
lingo script to that animation. Go to the last frame of the animation in Director, choose Script from the Window menu, and add this code:
on exitFrame go to frame 1 end This bit of code will force Shockwave to loop the animation repeatedly. Even better would be a lingo script that only loops a few times and stops, or a Shockwave animation with start and stop buttons integrated into it, but both of those capabilities are beyond the focus of this book. |
| Q | My embedded objects work just fine when I test them locally, but once I put them up on my server, Netscape seems to think they're text/plain and never loads the plug-in to play them. What's going on here? |
| A | You need to configure your server to recognize your media files and send them with the right content-type. If your server doesn't understand what kind of file you have, it'll assume it's a text file. Hence, the error you keep getting. |
| Q | I fixed my server. Netscape is still insisting that my embedded objects are text. |
| A | This seems to be a problem with Netscape; it doesn't reload things when you really do want them to reload. Try clearing Netscape's disk and memory caches (Options | Network Preferences | Cache) and reloading the page to see if that works |