| Table of Contents | Previous Next |
4.2 Basic multimedia applications on the Web4.2.1 A simple page with sound and musicOne of the simplest ways to include multimedia files on Web pages is to use the anchor element <a> and let your system handle all the sound and video playback. For example, suppose you have a sound file called mu_mid.mid. The sound format and file extension are supported by your system. To play this music on your browser, all you have to do is to issue the anchor element such as <a href="mu_mid.mid">click me to play some sound</a> When you press the underlined text, the default player of your system will be called to play the sound file. In this case, we assume the music file mu_mid.mid is in the current directory. Otherwise you may need to specify the file's path. For many Windows systems, WMP is activated to play the sound. Again WMP is assumed as the default media player in early sections of this chapter. As long as your system supports the sound and/or music format, the anchor element will work. Also, you can put some images inside the anchor element to trigger the href action. Consider the following example:
Example: ex04-01.htm - My First Multimedia Page With Sound And Music
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-01.htm </title></head>
7: <style>
8: .txtSt {font-family:arial;font-size:18pt;color:#ffff00;
9: font-weight:bold;background:#000088}
10: </style>
11: <body vlink="#000088" alink="#000088" link="#000088" class="txtSt">
12: <div align="center"><br />
13: A Simple Page To Play Sound<br />Please Click The Pic To Play<br /><br />
14: <table class="txtSt" style="font-size:14pt">
15: <tr>
16: <td> <a href="mu_glass.wav"><img src="pic_glass.gif" alt="pic"
17: width="150" height="120" /></a> </td>
18: <td> <a href="mu_gun.wav"><img src="pic_gun.gif" alt="pic"
19: width="150" height="120" /></a> </td>
20: <td> <a href="mu_mid.mid"><img src="pic_music.gif" alt="pic"
21: width="150" height="120" /></a> </td> </tr>
22: <tr> <td> Broken Glass</td><td>Gun Shot</td><td>Midi Music</td></tr>
23: </table>
24: </div>
25: </body>
26: </html>
This is a simple page to play three sound files. They are:
arranged by a table in lines 1423. Each sound file will be triggered by an image. When the image is clicked, the corresponding sound or music will be activated and played by the default media player. For example, if you click the "Broken Glass picture," the WMP is activated and will play the corresponding sound file mu_glass.wav. Some screen shots of this page in action are shown in Figs 4.1 and 4.2. Figure 4.1. ex04-01.htm
Figure 4.2. Sound Play by WMP
Using anchor <a> for multimedia applications is very simple. You don't need to worry about browser capability and add-on software such as plugins. As long as you have a default media player such as WMP installed and supporting the media format, your media application will run properly. 4.2.2 A simple page with video clipsNot just sound files, but also movies and video clips can be played using the same method. The next example can be used to play back some video clips using the anchor element <a>.
Example: ex04-02.htm -A Page With Some Video Clips
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-02.htm </title></head>
7: <style>
8: .txtSt {font-family:arial;font-size:18pt;color:#ffff00;
9: font-weight:bold;background:#000088}
10: </style>
11: <body vlink="#000088" alink="#000088" link="#000088" class="txtSt">
12: <div align="center"><br />
13: A Simple Page To Play Video Clips<br />
14: Please Click The Pic To Play<br /><br />
15: <table class="txtSt" style="font-size:14pt">
16: <tr>
17: <td><a href="vcd.mpg">
18: <img src="vcd.gif" alt="pic" width="200" height="180" /></a> </td>
19: <td><a href="dropxx1.mpg">
20: <img src="movie01.gif" alt="pic" width="200" height="180" /></a> </td>
21: <tr> <td>Video Logo Clip</td><td>MPEG Video Clip</td></tr>
22: </table>
23: </div>
24: </body>
25: </html>
This page contains two video clips: they are defined by two anchor elements in lines 17 and 19. The video clips are triggered by two images vcd.gif and movie01.gif. The images are animated GIF pictures so that some animations are achieved before the video playback. Again, when one of the pictures is clicked, the WMP is activated to play the video clip. Some screen shots of this example are shown in Figs 4.3 and 4.4. Figure 4.3. ex04-02.htm
Figure 4.4. Playing a movie clip
Figure 4.4 is a movie clip of Video Compact Disc (VCD) format. A VCD is a kind of Compact Disc (CD) holding video and/or movies, using compressed MPEG-1 video. In general, its resolution is 352 x 240 (NTSC) or 352 x 288 (PAL), which is roughly comparable to VHS. Compared to VCD, the Digital Versatile Disc (DVD) provides much higher resolution (700 x 480), comparable to laserdisc (LD). Typical DVD movies use MPEG-2 compression, rather than the MPEG-1 compression used by VCDs. That means that if you have an MPEG-1 player, you can play back VCD video. If you have an MPEG-2 player, you can play back DVD movies. In normal circumstances, using anchor element <a> will activate the media player as a separate application and may open another window. In many cases, the integrity of the page or page layout will be destroyed. Some of you may ask whether you can embed the video and/or sound inside a Web page. Or more precisely, can we control the media player within a Web page? Due to browser and system incompatibility, this is not an easy question. You will learn about the answer, solutions, and about related technologies in this chapter. If you are using IE, one simple solution to embed video in a Web page is to use the image element <img>. 4.2.3 Embedding video with the <img> elementFrom XHTML, you have learned that <img> is a W3C standard element to display an image on a Web page. This element and its attributes, such as align, hspace, vspace, alt, name, src, ismap, usemap, border, height, and width, are supported by all browsers. In order to support video playback, Microsoft has extended the capability of <img> by introducing an additional attribute called dynsrc. This attribute is used to store the URL of the video and dedicate it for video playback. When used, it will replace the value assigned to the src attribute and use the value of dynsrc instead. For example, the following statement can be used to play a video clip: <img src= "pic01.gif" dynsrc= "dropxx1.mpg" /> In this case, the video dropxx1.mpg will replace the picture pic01.gif displayed by the browser. Consider the following example:
Example: ex04-03.htm - Embedding Video With <img>
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-03.htm </title></head>
7: <style>
8: .txtSt {font-family:arial;font-size:18pt;color:#ffff00;
9: font-weight:bold;background:#000088}
10: </style>
11: <body class="txtSt">
12: <div align="center"><br />
13: Embedding Video Within Image Element <img><br /><br />
14: <img dynsrc="dropxx1.mpg" />
15: </div>
16: </body>
17: </html>
This is a simple page to use <img> to play back video. The most important statement is line 14. If you are using IE4+, the browser will process and display the file dropxx1.mpg as a video clip. A screen shot of this page is shown in Fig. 4.5. Figure 4.5. ex04-03.htm
Now, you modify line 14 of this page as
<img src="logo_web.jpg" dynsrc="carxx2.avi"
alt="pic" width="350" height="300" />
and call the new example ex04-04.htm. The statement above embeds another movie format (carxx2.avi) supported by WMP. This example also shows that you can control the dimensions of the display by providing the width and height values. By putting an image into the src attribute, the browser can display this image while loading the movie. A screen shot of this example is shown in Fig. 4.6. Figure 4.6. ex04-04.htm
To embed video with <img>, in many cases, is handy to develop multimedia applications. However, dynsrc is not a standard attribute recommended by W3C. Both NS and Opera would ignore the dynsrc attribute and process <img> for image only. For NS and Opera browsers, plugins are used. Plugins (sometimes called plug-ins) are software that can be used to enhance the functionality of a browser. Plugins will be discussed later in section 4.4. For now, let's consider some more applications using WMP, particularly how to use the controlling buttons of WMP on Web pages. 4.2.4 Including objects with the <object> elementTo include objects in Web pages is not new in HTML/XHTML. For example, <img> can be considered as an XHTML element to include an image object. The <applet> element is of course another example to include an object: namely the Java applet. According to W3C, they are specific elements that include specific objects. For example, you cannot use <img> to include a Java applet or vice versa. In order to develop an all-purpose mechanism for generic object inclusion, the W3C authority introduced a new element called <object> in HTML4. This object element can be used to include an image, applet, plugin, handler, and others in a Web page. In the truly diverse world of multimedia, it is a first step toward an all-singing and dancing element to include generic objects. For example, suppose you have an image logo_web.jpg. You can use the following <img> statement to display it on a Web page: <img src="logo_web.jpg" /> Alternatively, you can also use the object element <object> to display the same picture. Consider the following example: Example: ex04-05.htm - Display An Image Using <object> 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-05.htm </title></head> 7: <body> 8: <object 9: data="logo_web.jpg" 10: type="image/jpeg" 11: width="350" height="250" > 12: </object> 13: </body> 14: </html> To use <object>, you may need to define the attributes data and type as illustrated in lines 910. The data attribute specifies the URL of the data and the type attribute defines the MIME type (or content type) of the data declared in the browserserver dialog. In this case, the MIME type of a JPEG image is image/jpeg. Another application of the object element is to include a Java applet in Web pages. For example, there is a standard Java applet demo in J2SDK called Clock2.java. This program comes with the standard Java package and will display an animated clock on a page. Once you compile the program and produce a bytecode application (Clock2.class), you can use the following applet element to display the clock: <applet code="Clock2.class" width="170" height="150"> </applet> To display this clock using the <object> element, consider the following example: Example: ex04-06.htm - Include Java Applet Using <object> 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-06.htm </title></head> 7: <body> 8: Display A Live JAVA Clock <br /> 9: Using <object> Element<br /><br /> 10: <object 11: data="Clock2.class" 12: codetype="application/java-archive" 13: classid="java:Clock2.class" 14: width="170" height="150" > 15: </object> 16: </body> 17: </html> This page inserts a Java applet into an XHTML page using <object>. The data attribute in line 11 specifies the location of the applet. In this case, the applet is a Java class (or bytecode) from file Clock2.class located in the local directory. By setting the codetype attribute in line 12, the browser can retrieve the Java application if necessary. The classid attribute in line 13 is used to identify the Java program Clock2.class to run. Just like Java applet, this page runs on all browsers with Java and supporting the <object> element, which includes IE5+, NS4+, and Opera 5+. A screen shot of this page on IE6 is shown in Fig. 4.7. Another screen shot of this page on an older browser NS4.x is shown in Fig. 4.8. More Java, including the Java Media Framework and its multimedia applications, will be discussed later in section 4.5. Figure 4.7. ex04-06.htm
Figure 4.8. Using <object> on NS4.x
As mentioned earlier, the classid attribute of the <object> element can be used to identify the Java program to be run. In fact, this attribute can also be used to identify and include an ActiveX control in a Web page. In the next section, we will show you how to embed WMP into a Web page, particularly how to use the control buttons of WMP in your application. |
| Table of Contents | Previous Next |
