Embedding Windows Media Player into a web page (HTML Programming Tutorial) • Geekpedia

How to include the Windows Media Player plugin into your webpage so that you can play WMV or other video files. It also contains a list of the most popular attributes and parameters to pass to this plugin.

You probably saw many websites that include an embeded video player in their pages, such as the one in the images below.
Most of the time, the embedded video player is Windows Media Player, and in this tutorial I’ll show you how you can embed Windows Media Player into a webpage.

Embedding Windows Media Player and playing a video
Open the HTML page in which you want the player embedded and place the following tag within <body></body> the tag where you want it displayed:

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" ShowStatusBar="true" EnableContextMenu="false" autostart="false" width="320" height="240" loop="false" src="MyVideo.wmv" />

Be sure to have a video file named MyVideo.wmv in the same directory with the HTML file, or simply change the src attribute to point to the path of a real video file.

Most of the attributes of the <embed> tag are obvious, still it won’t hurt to review them:

type – the type attribute defines the type of embeded object you’d like to use. This tag is mandatory for Windows Media Player to be emdedded in the web page.

pluginspage – in case the Windows Media Player plugin cannot be found on the visitor’s computer, this link will point him to more information regarding this player.

name – this attribute assigns a name to this embeded object; this will allow you to access multiple embedded objects differently.

ShowStatusBar – wether the statusbar is shown or not, the statusbar being the black bar at the bottom which displays various information such as the name of the clip, elapsed time and total time.

EnableContextMenu – if this attribute is set to true, the user will be able to access Window Media Player’s context menu by right clicking the embedded player.

autostart – defines wether or not the video should start playing automatically when the page is loaded.

width and height – defines the size in pixels of the Windows Media Player embedded window. If you want the visitors to see the video at its original resolution, you should define the same size as the one of the video, but also keep in mind the controls of the embedded window (such as the statusbar) which are counted in this defined width and height. One better way of displaying the video at its original resolution is to omit the width and height attributes.

loop – set this attribute to true if you would like the video to continue looping, or to false if you want it to stop once it has ended.

src – the src attribute is mandatory since it defines the path to the file you want to play.

Ok, this was the quick and dirty way of embedding Windows Media Player plugin into a webpage, but there’s more than this. If you want to specify more preferences such as the volume, the balance or the playback rate, use the following tags:

<OBJECT id="VIDEO" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" width="320" height="240">

   <PARAM NAME="URL" VALUE="MyVideo.wmv">

   <PARAM NAME="enabled" VALUE="True">

   <PARAM NAME="AutoStart" VALUE="False">

   <PARAM name="PlayCount" value="3">

   <PARAM name="Volume" value="50">

   <PARAM NAME="balance" VALUE="0">

   <PARAM NAME="Rate" VALUE="1.0">

   <PARAM NAME="Mute" VALUE="False">

   <PARAM NAME="fullScreen" VALUE="False">

   <PARAM name="uiMode" value="full">

</OBJECT>

The CLASSID attribute of the <object> tag contains the class ID for Windows Media Player versions 7, 9 and 10. The width and height attribute specify the size in pixels of the entire plugin.

The child tags define parameters for this object, just like the attributes did in our first example of embedding the WMP plugin. I haven’t included all the parameters, only the most popular ones which you need:.

URL – this is a mandatory attribute that specifies the path to the file you want to play

enabled – wether or not the player and its controls are enabled to the user.

AutoStart – if set to true, the video will start playing automatically after the page has finished loading.

PlayCount – how many times the video will loop.

Volume – defines the volume on a scale of 0 to 100.

balance – the speaker balance, the range is from -100 (left) to 0 (center) and to 100 (right).

Rate – the playback rate; 1.0 is the normal playback speed, 0.5 is half and 3 is three times the normal speed.

Mute – wether or not the sound is muted.

fullScreen – if set to True, the video will run in full-screen mode when it starts playing.

uiMode – the user interface for the plugin; possible values are: invisible, none, mini and full.

There is more to be said about embedding WMP in a web page. You can create your own user interface if you don’t want the visitors to use the default one of WMP, that’s why this tutorial will perhaps be continued.