| Table of Contents | Previous Next |
4.4 Using plugins for multimedia applications4.4.1 What are plugins?Roughly speaking, plugins (or plug-ins) are small pieces of software which can be used to enhance the capability of a browser. Plugins were created by Netscape in the early days of Web browsing to expand the functionalities of the NS. Sometimes people refer to plugins as Netscape Plugins (NS Plugins). Usually they are Dynamic Linking Library (DLL) files located in the "plugins" directory of the Netscape family of browsers. When compared to ActiveX embedding, they are similar but also have some differences. They are similar in the sense that you can use a plugin to display a video just as well as you can use an ActiveX control. One of the big differences between ActiveX and plugins is that ActiveX controls work with programs. The primary goal of ActiveX is to distribute small programs to add some sort of functionality to the Web page. Because of that, ActiveX programs have a life apart from the Web page or browser. Also, you may need to identify the ActiveX by CLSID. On the other hand, plugins are designed to integrate more with browsers and work with data that a browser cannot handle. Once installed, you can use plugins without worrying about the CLSID value. Plugins are widely supported by all major browsers such as IE, NS, and Opera. Even WMP itself can be used as plugin software. Some other popular NS plugins are:
These plugins can be found and downloaded from Netscape's official site (www.netscape.com). For our multimedia purposes, we only consider the following plugins:
The WMP Plugin can be downloaded from Microsoft's official site. Readers may notice that we keep referencing the official sites of a particular Web product or service rather than providing the absolute URL address. One reason is that, in our experience, the URL address of a product changes all the time. For example, by the time you read this some of the Web sites hosting a particular product or service may have changed. Therefore, the official site is provided for reference. Users can use the search engine of the official site to search or locate the Web products or services required. To install the plugins is simple, all you have to do is to download them from the site and run the program. In most cases, the installation program will place the necessary .dll files into the appropriate plugin directory. For example, if you run the program QuickTimeInstaller.exe, you will have a QuickTime player as a standalone program together with the QuickTime plugins. The QuickTime player and plugins support the popular media file formats given in Table 4.3.
The file extensions are associated with the media format and handled by the QuickTime plugins. In many cases, the QuickTime plugins will override the original system settings. This means that some of the audio/video files originally played by, say, WMP will be handled by the QuickTime plugin player after installation. For example, if you run the ex04-02.htm page with NS6.x, you will see the QuickTime plugin embedded in the browser as illustrated in Figs 4.26a and 4.26b. Figure 4.26a. Using Quicktime plugin I
Figure 4.26b. Using Quicktime plugin II
One of the advantages of using plugins is that you no longer need the classid value to identify the program as in ActiveX. When you activate plugins with anchor <a>, the plugin software or media player will be embedded into the browser. Normally, the player will appear on a separate page as illustrated in Fig. 4.26b. Now you have a plugin media player (QuickTime) up and running on your system. To fully embed this player and many others such as WMP and RealTime player into a Web page, you need a more general embedding element. This element is called <embed>. It is a non-standard but widely supported element to embed multimedia applications into a Web page. 4.4.2 The embed element <embed>As we mentioned earlier, the embed element <embed> is not a W3C recommendation to embed an object. However, this element is very popular among the Web community. In particular, from simple music playback to watching an entire movie, it is used at all levels. Also, due to its popularity, almost all Web developers and major browsers support it strongly, including IE, NS, and Opera. Let's consider an example to play back some audio in various forms. The example below will play three different kinds of music using QuickTime plugins. The first is an MPEG Layer 3 format known as MP3. The others are the wav and midi formats. As a feature of plugins, we have rescaled the plugin QuickTime player to be so small that it looks like a button. Although this is not the proper way to display the control buttons of a player, it does provide an immediate effect and the functionality of a control button. When the user presses one of the playback buttons, the associated music will be played instantly. The page code of the plugin is listed below:
Example: ex04-11.htm - Embedding Audio With <embed> Element
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html
3: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6: <head><title> ex04-11.htm </title></head>
7: <style>
8: .txtSt {font-size:18pt;font-weight:bold;color:#ffff00;
9: background:#000088;font-family:arial}
10: </style>
11: <body class="txtSt"> <br />
12: <div align="center">
13: Embedding Audio Within A Web Page<br /><br />
14: <table style="font-size:14pt">
15: <tr><td width="430">
16: Using <embed> element, you can embed audio and/or
17: music into your Web page. Also, by reducing the size of the media
18: player, the player is similar to a button. </td></tr>
19: <tr><td>
20: <embed src="dvd02.mp3" autostart="false" width="50" height="15"
21: type="audio/x-mp3" /> -- MPEG Layer 3 (MP3) Music
22: </td></tr><tr><td>
23: <embed src="dvd.wav" autostart="false" width="50" height="15"
24: type="audio/wav" /> -- Wav Music
25: </td></tr><tr><td>
26: <embed src="mu_mid.mid" autostart="false" width="50" height="15"
27: type="audio/midi" /> -- Midi Music
28: </td></tr>
29: </table>
30: </body>
31: </html>
This page contains three sessions of music embedded in the Web page by the <embed>element. Lines 2021 define the first session of music:
<embed src="dvd02.mp3" autostart="false" width="50" height="15"
type="audio/x-mp3" /> -- MPEG Layer 3 (MP3) Music
This is a small piece of music in MP3 format. The playback will be controlled by plugin software specified by the content type audio/x-mp3. Since you only have QuickTime plugins installed at this moment, the playback will be performed by QuickTime. The src attribute specifies the file name storing the music. One interesting feature of this example is the dimension settings. By setting the dimensions as width="50" and height="15" the controls of the player will look like a button and therefore can be used as a button. The autostart attribute specifies that the music will not be played automatically. You must click the appropriate button to play the music. The other two sessions of music are defined in a similar manner. A screen shot of this example running on NS6.2 is shown in Fig. 4.27. Figure 4.27. ex04-11.htm
Another interesting feature of this example is that, if you click on two pieces of music, the music will be played simultaneously. They are played independently so that it is just like mixing the music together. The QuickTime player and its associated plugin software are famous for playing back QuickTime movies. There are a large number of movies and video in QuickTime (.mov) format which is supported by major film industries. Let's consider an example to play back QuickTime movies. 4.4.3 A page to play back movies using pluginsQuickTime movies are widely supported by the film and TV broadcasting industries. In order to get an idea of its popularity, you can activate the QuickTime player as illustrated in Fig. 4.28. Figure 4.28. QuickTime player
For multimedia applications, you can obviously employ this media player to play back video and/or movies on your system as a standalone program. On the other hand, you can embed the video and/or movies into a Web page using the <embed> element. Consider the following example:
Example: ex04-12.htm - PlayBack Movies Using Plugins
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html
3: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6: <head><title> ex04-12.htm </title></head>
7: <style>
8: .txtSt {font-size:18pt;font-weight:bold;color:#ffff00;
9: background:#000088;font-family:arial}
10: </style>
11: <body class="txtSt"> <br />
12: <div align="center">
13: Embedding Movies Within A Web Page<br />
14: Using <embed> And Plugins<br /><br />
15: <table style="font-size:14pt;text-align:center" >
16: <tr><td>
17: <embed src="dropxx1.mov" autostart="false" width="340" height="270"
18: type="video/quicktime" /><br />QuickTime Movie (dropxx1.mov)
19: </td><td>
20: <embed src="robotxx2.mpg" autostart="false" width="340" height="270"
21: type="video/mpeg" /><br />MPEG Movie (robotxx2.mpg)
22: </td></tr>
23: </table>
24: </body>
25: </html>
This is a page to play back some movies supported by the QuickTime plugins. The first movie is in QuickTime format with file extension .mov. This browser identifies the movie by the MIME type video/quicktime and activates the proper plugin accordingly. The src attribute and dimension settings are very similar to the example ex04-10.htm. A screen shot of this example is shown in Fig. 4.29. Figure 4.29. ex04-12.htm
If you have made a mistake about the type, the page will not work properly. For example, suppose you have made a mistake in line 18 as follows:
The browser can no longer recognize the type and will try to get the plugin software from the Internet. A screen shot of this situation is demonstrated in Fig. 4.30. Figure 4.30. Making a mistake on content type
Since IE also supports plugins and the <embed> element, this example will run on IE without any modification. A screen shot of this example on IE is shown in Fig. 4.31. Figure 4.31. ex04-12.htm on IE
By using the QuickTime plugin on IE, QuickTime movie (.mov) can be played on the IE family of browsers. Now, you have a system where both IE and NS can play back QuickTime movies. However, in normal circumstances, the QuickTime plugin or player cannot play back Windows Media video and/or movie format. The next question is: how can we play back Windows Media formats or wmv movies on an NS browser? In order to play back the Windows Media Video (WMV) file on the NS family of browsers, the WMP plugin is needed. The plugin software is called, again,
and can be downloaded from Microsoft's official site. Once this program is run and installed, you are ready to use WMP as the plugin. The MIME type of WMP is identified by application/x-mplayer2 By using WMP as the plugin, the Windows Media Video (wmv) file can be played on the NS family of browsers. Consider the following example:
Example: ex04-13.htm - Using WMP As Plugin
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html
3: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6: <head><title> ex04-13.htm </title></head>
7: <style>
8: .txtSt {font-size:18pt;font-weight:bold;color:#ffff00;
9: background:#000088;font-family:arial}
10: </style>
11: <body class="txtSt">
12: <div align="center">
13: Using Windows Media Player As Plugin<br /><br />
14:
15: <embed type="application/x-mplayer2"
16: src="dropxx1.wmv"
17: name="MediaPlayer2"
18: width="300"
19: height="270"
20: autoStart="true"
21: showControls="true">
22: </embed>
23:
24: </body>
25: </html>
Line 15 is to identify WMP by the content type "application/x-mplayer2." The src attribute specifies the data source which in this case is a Windows media file called "dropxx1.wmv." After the name and dimension of the embedded object, the following two attributes are defined as true: autoStart = "true " showControls = "true" The first attribute will start the playback once the statement is executed; the second is to show all the control buttons of the player. This example will run on IE and NS4.x and NS6.x. A screen shot on NS6.2 is shown in Fig. 4.32. Figure 4.32. ex04-13.htm on NS6.2
4.4.4 Cross-browser applications with pluginsNow, you have two plugins on your system: QuickTime supports mov movie and WMP supports the wmv format. They both support others too! This may create a slightly confusing situation, in particular for beginners who have modest experience of multimedia. Which media player is used to play back what is not clear. Even more confusing is the situation that some of the mov files can be played back using WMP and some cannot. One of the best ways to explain the situation is by example. Consider the following example which can activate WMP to play back dropxx1.wmv video. Both the type and the file extension are pointing to the right identity:
<embed type="application/x-mplayer2"
src="dropxx1.wmv"
name="MediaPlayer2"
width="350"
height="270"
autoStart="true"
showControls="true">
>
</embed>
In fact, this example is the main part of ex04-13.htm. If you change the movie file to dropxx1.mov and call the new example ex04-14.htm, you have a QuickTime movie. The example turns out to be:
Example: ex04-14.htm - Cross Browser Applications I
1: <?xml version="1.0" encoding="UTF-8"?>
2: <!DOCTYPE html
3: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
4: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
6: <head><title>ex04-14.htm</title></head>
7: <style>
8: .txtSt {font-family:arial;font-size:18pt;font-weight:bold}
9: .butSt{font-family:arial;font-size:12pt;color:#008800;
10: background-color:#ffccccc;width:160px;height:26px;font-weight:bold}
11: </style>
12: <body style="background:#000088;color:#ffff00;text-align:center">
13: <div class="txtSt"> <br />
14: Cross Browser Applications with Plugin I<br /><br />
15:
16: <embed type="application/x-mplayer2"
17: src="dropxx1.mov"
18: name="MediaPlayer2"
19: width="350"
20: height="270"
21: autoStart="true"
22: showControls="true"
23: >
24: </embed>
25:
26: </div>
27: </body>
28: </html>
With both these plugins, you may find some interesting results as discussed below. The IE6.x browser will activate the QuickTime player to play back the movie dropxx1.mov as illustrated in Fig. 4.33a. The NS6.2 browser activates WMP to play the movie instead (see Fig. 4.33b). Figure 4.33a. ex04-14.htm on IE6.2
Figure 4.33b. ex04-14.htm on NS6.2
The reason is that IE will interpret the file extension specified in line 17 and therefore identify the QuickTime player for the playback. The NS browser, on the other hand, identifies the MIME type first and ultimately activates WMP instead. Also, the QuickTime movie in this example, dropxx1.mov, can be played by WMP so that the movie shows up on the screen correctly. If you use a QuickTime movie (.mov) that cannot be played by WMP, like the ones you download from the Internet, the IE browser will play it properly. This is because IE interprets the file extension first. The NS browser, in this case, will not play back at all since the MIME type is wrong. In the following example, we consider another situation when IE and NS are used to play back an MPEG movie. First, the statements in lines 1624 of ex04-14.htm are modified as
<embed type="application/x-mplayer2"
src="robotxx2.mpg"
name="MediaPlayer2"
width="350"
height="270"
autoStart="true"
showControls="true"
>
</embed>
This new example is called ex04-15.htm. For comparison, some screen shots in IE and NS of this example are shown in Figs 4.34a and 4.34b. Since the QuickTime plugin has been installed on the system, IE will activate it to handle and play back the MPEG movie via the file extension. This arrangement will override the MIME type specification. NS, on the other hand, follows the instruction of the MIME type and uses WMP for the playback. You may ask: how can we employ WMP within IE for the playback? Figure 4.34a. ex04-15.htm on IE
Figure 4.34b. ex04-15.htm on NS
Basically, there are two solutions. As we mentioned earlier, the QuickTime plugin has altered the system registry so that all MPEG files with mpg extension will be handled by QuickTime. One solution is to change the system registry. Another quick solution is to rename the movie file robotxx2.mpg as something that cannot be recognized by the system or IE. For example, you can modify the code fragment above as
<embed type="application/x-mplayer2"
src="robotxx2mpg"
name="MediaPlayer2"
width="350"
height="270"
autoStart="true"
showControls="true"
>
</embed>
and call this example as ex04-16.htm. Note that the source file is robotxx2mpg without any file extension. This will force the IE browser to employ the player specified in the MIME type attribute. When talking about multimedia applications across browsers and platforms, we must say that Java is a strong competitor at every level. For example, if you want to develop a multimedia application that can run on Windows, UNIX/LINUX, and others, one of your best bets would be to use the Java Media Player and Java Media Framework (JMF). |
| Table of Contents | Previous Next |
