Inserting a Windows Media Player in a web page

Users often express interest in playing video files on their Web pages. This TechNote shows how to embed the Microsoft Windows Media Player in an HTML page to play a video file. The embedded Windows Media Player will display most video file formats in recent versions of both Microsoft Internet Explorer and Netscape on the Windows platform, although whether the video files display as expected will depend on several factors, including specific configurations on the computers viewing the video files.

You should be comfortable with hand-modifying source code (and this may involve changing certain parameters) before implementing these steps.



Adding your own ActiveX parameters in Dreamweaver

1.
In the Document window, place the insertion point where you want the Windows Media Player to appear.

2.
Choose Insert > Media > ActiveX. The menu commands used may differ slightly depending on the version of Dreamweaver used. This will add an empty ActiveX object to the page.

3.
Select the ActiveX object in the Document window.

4.
On the Property inspector, enter the following text into the Class ID text box:


CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95

You can copy the above text from this web page and then paste it into the Class ID text box. Although this is a pop-up menu from which you can choose various class IDs, you can also freely add any class ID you might need.

5.
Also on the Property inspector, do the following:
  1.Select Embed.
  2.Set the width and height in the W and H text boxes. A standard setting is 320 x 290 pixels.
  3.Click the Browse folder icon (next to the Src text box) and navigate to find and select a file in a supported Media Player format. (Supported formats are listed in the chart below.)
  4.Type mediaplayer1 in the ID text box.

6.
Click Parameters on the Property inspector.

7.
In the Parameters dialog box, enter the following parameters:
Parameter-----Value
FileName-----YourFileNameHere (same as the Src path in Step 5)
AutoStart-----True
ShowControls-----True
ShowStatusBar-----False
ShowDisplay-----False
AutoRewind-----True
You add a parameter by clicking Plus (+). The above parameters are those most commonly chosen. You may want to change these to suit your needs. For instance, if you would prefer that the video not play until the viewer clicks Play, set the AutoStart parameter to False instead of True.

8.
Switch to Code view or open the Code Inspector. Your HTML code will now look similar to that displayed below:

<object width="320" height="290"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
id="mediaplayer1">
<param name="Filename" value="kids.mpg">
<param name="AutoStart" value="True">
<param name="ShowControls" value="True">
<param name="ShowStatusBar" value="False">
<param name="ShowDisplay" value="False">
<param name="AutoRewind" value="True">
<embed width="320" height="290" src="/support/dreamweaver/ts/documents/kids.mpg" mce_src="/support/dreamweaver/ts/documents/kids.mpg"
filename="kids.mpg" autostart="True"
showcontrols="True" showstatusbar="False"
showdisplay="False" autorewind="True">
</embed>
</object>

9.In the source code add the following text inside the <embed> tag:

type="application/x-mplayer2"
pluginspage=http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/

Your source code should now appear similar to:

<object width="320" height="290"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
id="mediaplayer1">
<param name="Filename" value="kids.mpg">
<param name="AutoStart" value="True">
<param name="ShowControls" value="True">
<param name="ShowStatusBar" value="False">
<param name="ShowDisplay" value="False">
<param name="AutoRewind" value="True">
<embed
type="application/x-mplayer2"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/MediaPlayer/"
width="320" height="290" src="/support/dreamweaver/ts/documents/kids.mpg" mce_src="/support/dreamweaver/ts/documents/kids.mpg"
filename="kids.mpg" autostart="True"
showcontrols="True" showstatusbar="False"
showdisplay="False" autorewind="True">
</embed>
</object>

10.Save the file and test on different systems and in different browsers.

Related posts

Post a Comment

Your email is never shared. Required fields are marked *

*
*