| Table of Contents | Previous Next |
4.3 Embedding and controlling WMP4.3.1 Identifying WMP with ActiveX controlsIf you are using a Windows system, chances are that you already have WMP up and running on your system for multimedia applications. There are a number of ways to activate this software. In particular, we have shown you at the beginning of this chapter how to use the anchor element <a> to activate WMP. In order to control WMP more effectively, you need something called ActiveX or ActiveX control. ActiveX controls were created by Microsoft based upon the Component Object Model (COM) technology. They are a refinement of the Object Linking and Embedding (OLE) custom controls. Basically, they are programs that can be called and embedded inside another program. Any program that is a container for ActiveX controls can host them. Thus, you can employ ActiveX controls in a Web page since IE is a container. You can also employ ActiveX controls in applications such as Visual Basic since Visual Basic forms are containers. Since ActiveX controls are specific Microsoft products, examples in this section or related to ActiveX may only work on IE and Windows platforms. In a Windows system, ActiveX controls are identified by a unique value called class identity (clsid). This value is stored in the system registry. To see the clsid, you can use the registry editor regedit. For example, if you open a DOS window and type the "regedit" command, you will see the "Registry Editor" window. If you go to My Computer|HKEY_LOCAL_MACHINE|SOFTWARE|Microsoft|Multimedia|MPlayer2 from the "registry editor" window (Fig. 4.9), you will see the following information:
CLSID {22d6f312-b0f6-11d0-94ab-0080c74c7e95}
Player.Path T:\Program Files\Windows Media Player\mplayer2.exe
Figure 4.9. The "Registry Editor" window
WMP is identified by the class identity (CLSID) and the location is specified by the Player.Path. The Player.Path may be different on your system. The CLSID can help you to embed WMP into your Web pages. 4.3.2 Embedding WMPTo embed WMP into your Web page, you need to declare the CLSID and the value in the classid attribute with the <object> element. Consider the following example:
Example: ex04-07.htm - Embedding Windows Media Player In A Web Page
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-07.htm </title></head>
7: <style>
8: .txtSt {font-family:arial;font-size:18pt;font-weight:bold}
9: </style>
10: <body style="background:#000088;color:#ffff00;text-align:center">
11: <div class="txtSt">
12: Embedding Windows Media Player<br />
13: Inside A Web Page<br /><br />
14:
15: <object
16: classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
17: type="application/x-oleobject"
18: id="MediaPlayer1" width="320" height="240">
19: <param name="FileName" value="mu_mid.mid" />
20: </object>
21: </div>
22: </body>
23: </html>
This page can be used as a framework to embed WMP into your Web application. The important statements are in lines 1617. In line 16, the classid attribute is used to identify the WMP program. The value CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95 will identify WMP in your system and every other Microsoft Windows system. Line 17 is the content type used by WMP. When used together, the entire WMP will be included in your Web page. The information in line 18 provides further information on how you may want to use WMP. In this case, an id="MediaPlayer1" is assigned to WMP. Now, you have WMP embedded in the page. To use the player is simple: all you have to do is to assign a file for it to play. This can be done by the parameter element <param>. Similar to Java, the <param> element can be used to input a parameter into the application (i.e., WMP). The statement in line 19 assigns a music MIDI file for WMP to play. A screen shot of this example is shown in Fig. 4.10. Figure 4.10. Embedding WMP
One of the advantages of including WMP this way is that all the controlling buttons of WMP are embedded. No extra programming or coding is needed. That means you can use the control buttons of WMP to "Stop" and/or "Play" the music. Since WMP has the capability to play a large amount of multimedia file formats, you can change the page to perform other multimedia applications easily. For example, you can change line 19 of ex04-07.htm to <param Name="FileName" Value="dropxx1.mpg" /> and call the new example ex04-08.htm. WMP will play back the mpeg video file dropxx1.mpg instead of playing music. A screen shot of this video playback is shown in Fig. 4.11. Can we create and control the action buttons in WMP? Figure 4.11. Playing MPEG video
4.3.3 Creating control buttons for WMPIn this section, we will show you how to create some control buttons for WMP. Microsoft WMP is a big object offering more than 20 functions that can be called within a Web page. As a starting point, our next WMP application can only be a simple one. It contains the following features:
Consider the following example codes:
Example: ex04-09.htm - Creating Simple Buttons For WMP
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-09.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:
14: <div class="txtSt">
15: Creating Simple Buttons For<br />
16: Windows Media Player<br /><br />
17: <object
18: classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
19: type="application/x-oleobject"
20: id="MediaPlayer1" width="320" height="240">
21: >
22: <param name="FileName" value="dropxx1.mpg">
23: <param name="ShowControls" value="false">
24: <param name="ShowStatusBar" value="true">
25: </object><br /><br />
26:
27: <input type="button" value="Play" class="butSt"
28: onclick="document.MediaPlayer1.Play();" name="Play" >
29: <input type="button" value="Stop" class="butSt"
30: onclick="document.MediaPlayer1.Stop();"name="Stop" >
31: </div>
32: </body>
33: </html>
In fact, this example page is a modification of ex04-07.htm. First, we have added a new CSS style in line 9 called butSt. This style is used to format the "Play" and "Stop" buttons. After the usual WMP object inclusion in lines 1720, some parameter elements <param> are used to change the properties of WMP. Line 22 assigns the video file dropxx1.mpg to be played back by the player. The statement in line 23 <param name="ShowControls" value="false"> is used to turn off all the control buttons that come with WMP. Line 24 turns on the status bar of WMP so that the button status can be shown on the screen. After the <object> element, two buttons are defined. The first button is called "Play" which can be used to play back a multimedia file. The definition of this button is defined in lines 2728: <input type="button" value="Play" class="butSt" onclick="document.MediaPlayer1.Play();" name="Play" > Consider the first line of this input element. The <input> and type="button" define a push button on the screen. This push button has a display value or name called "Play." The display format of this button is specified by the CSS style butSt. The second line of this statement states that when the button is pressed, the function document.MediaPlayer1.Play() is activated. Since MediaPlayer1 is the identity of WMP (see line 20), the keyword document.MediaPlayer1 technically identifies WMP. Finally, calling the Play() method of MediaPlayer1 ultimately activates the playback function of the player. Similarly, calling the method Stop() in line 30 will stop the playback. A screen shot of this example is shown in Fig. 4.12. Figure 4.12. Creating buttons
In addition to the functions (or methods) Play() and Stop(), the WMP object also contains more than 100 properties that you can use for your applications. In the following example, we are going to show you how to turn the original control buttons of WMP on or off. This can be done via the properties of the WMP object. Consider the page below:
Example: ex04-10.htm - Changing Properties Of Windows Media Player
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-10.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:
14: <div class="txtSt">
15: Creating Simple Buttons For<br />
16: Windows Media Player<br /><br />
17: <object
18: classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
19: type="application/x-oleobject"
20: id="MediaPlayer1" width="320" height="240">
21: >
22: <param name="FileName" value="carxx2.mpg">
23: <param name="ShowControls" value="0">
24:
25: </object><br /><br />
26:
27: <input name="Play" type="button" value="Play" class="butSt"
28: onclick="document.MediaPlayer1.Play();">
29: <input name="Stop" type="button" value="Stop" class="butSt"
30: onclick="document.MediaPlayer1.Stop()"> <br />
31:
32: <input name="showBut" type="button" value="Show Controls" class="butSt"
33: onclick="document.MediaPlayer1.ShowControls = true">
34: <input name="hide" type="button" value="Hide Controls" class="butSt"
35: onclick="document.MediaPlayer1.ShowControls = false">
36: </div>
37: </body>
38: </html>
This page is a modification of ex04-09.htm. Two more buttons are added along with the "Play" and "Stop." They are "Show Controls" and "Hide Controls." When the "Show Controls" button is pressed, the controls of WMP are displayed; the "Hide Controls" button hides the controls of WMP. Unlike "Play" and "Stop," the controls are activated by the following property of the WMP object (see line 33): document.MediaPlayer1.ShowControls = true The MediaPlayer1 keyword identifies the WMP application. When the value of the property ShowControls is set to true, the original controls of WMP will be displayed. If the value of the property is set to false, all buttons and the slide bar will be hidden from the users. Some screen shots of this example are shown in Figs 4.13 and 4.14. Figure 4.13. ex04-10.htm
Figure 4.14. Hiding the controls
Now you have seen some of the sound, music, and movie formats used on the Web. In fact, WMP supports a large number of media formats. An interesting one will be introduced in the next section. 4.3.4 The Windows Media Video (WMV) formatTo see how many multimedia types are supported in WMP is easy. For example, you can fire up WMP and go to Tools | Options to open the "Options" window. From this window, click on the "File Types" menu, and you will see Fig. 4.15. For some earlier versions of WMP, the file type may be called "Formats." Figure 4.15. File types supported by WMP
The window contains all media file types supported by WMP. There are 12 categories which support more than 30 file extensions. Among them, there is an interesting one called "Windows Media audio/video file" (i.e., item 3). If you click on this one, you will get following description:
"The Windows Media audio/video file format(s) include
files with .wmv and .wmx extensions"
At the time of writing, this wmv file format is formally known as "Windows Media 8 Video" file format. Why is this interesting? Well, take a look at the comparison on file sizes in Table 4.2.
From this table, you can see that the file size of a wmv movie is about 1% of the avi counterpart. This format, in general, is less than 25% of MPEG-1 VCD format (mpg). For this size, Microsoft claims that quality video and movie can be played live on the Web with very low bandwidth connections. The next question would be: how can we convert existing movie format to the wmv file format? To answer this question, Microsoft provides software called "Windows Media Encoder" (WME) available from the download center of www.microsoft.com. After downloading and installing the WME, you can activate it to convert the existing file format into this wmv video type. As a simple example, let's consider how to convert an avi movie carxx2.avi into carxx2.wmv. First, activate the WME software and click on the first option "to convert a file using the New Session Wizard" (see Fig. 4.16). You will see the "New Session Wizard" window as illustrated in Fig. 4.17. Figure 4.16. Converting video from AVI to WMV Format I
Figure 4.17. Converting video from AVI to WMV Format II
When you pick the third choice, "Convert an audio or video file into a Windows Media file," and press the Next button, you will see Fig. 4.18. From this window, you can browser the avi file to be converted. In this case the input file is carxx2.avi and the output file is carxx2.wmv. Now select the "File will stream from a Web server or play directly on a computer" option (see Fig. 4.19). Figure 4.18. Converting video from AVI to WMP Format III
Figure 4.19. Converting video from AVI to WMV Format IV
From Fig. 4.19, select the profile you want to use. For this simple case, we will select the profile "WM8 Video for DSL/Cable Delivery (250KBps, 320x240, 30fps)" as illustrated in Fig. 4.20. Now, you can keep pressing the Next button until you reach Fig. 4.21. Figure 4.20. Converting video from AVI to WMV Format V
Figure 4.21. Converting video from AVI to WMV Format VI
When you press the OK button as shown in Fig. 4.21, you will see a big window where the conversion of the movie format is performed quite automatically (see Fig. 4.22). Note that the conversion will include any sound track within the original avi file. Figure 4.22. Converting video from AVI to WMV Format 8
As you can see from Fig. 4.22, the left window contains the input avi movie and the other contains the output wmv movie format. Now, you should have the new movie file carxx2.wmv in the directory specified in Fig. 4.18. You can play the video via the View Output button of the encoder. In this case, WMP will play back carxx2.wmv as demonstrated in Fig. 4.23. Figure 4.23. Playback of the video carxx2.wmv
In fact, the capability of the media encoder is more than just converting existing movie formats to wmv. If you have a capturing device installed on your system, such as a Webcam or a camera with a capture card, you can also use the encoder to capture the video. In this case, the video capture and conversion to wmv format will be performed at the same time. The encoder can use the installed capture device automatically. For example, on our system it can use an installed camera or a Web camera. The encoder uses the camera to capture live video in wmv format. A screen shot of the capturing is illustrated in Fig. 4.24. Figure 4.24. Output live video in Microsoft WMV format
In this case, the left window contains the video from the capture device and the right window contains the video output in wmv format. You can use ex04-10.htm to play back this captured movie robotxx2.wmv as in Fig. 4.25. Figure 4.25. Playback using WMP
Embedding WMP or ActiveX controls into Web pages is handy when you are using Microsoft systems with browsers supporting ActiveX. For other systems or browsers, another technology called "plugins" is widely used and accepted. |
| Table of Contents | Previous Next |
