Embedding Windows Media Files (.WMF Videos)

Windows Media Format

Streaming with Windows Media format can be good choice. Windows Media files tend to be of low size and high quality, but keep in mind not everyone uses Windows. So, in embedding your video file, you'll see how to access other browsers besides IE.

Embedding a Windows Media File

To embed a file simply means that you put the media player right into the web page itself. However, the end user must have Windows Media Player installed on their computer for this to work.

To do this, you must insert a special section of HTML code into your web page. There are many ways that you can do this, but, it depends on what you want to show. (It's possible to show the status display, video controls, set it to autostart, etc.)

HTML Code

The following is the code to embed a Windows Media file.

The <object> tag is needed for use with Internet Explorer on Windows. We have included the <embed> tag to reach the maximum browser capability due to the fact that it is used by most all other browsers (ie. Firefox, etc.)

You are welcome to copy and make use of it but remember to replace the "video-filename" with your .wmv file. Alter the parameters (which is talked about below the example) to your preference.

<OBJECT ID="MediaPlayer" WIDTH=320 HEIGHT=276 CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="video-filename.wmv">
<PARAM NAME="ShowControls" VALUE="true">
<param NAME="ShowStatusBar" value="true">
<PARAM NAME="ShowDisplay" VALUE="false">
<PARAM NAME="autostart" VALUE="false">
<EMBED TYPE="application/x-mplayer2" SRC="video-filename.wmv" NAME="MediaPlayer"
WIDTH=320 HEIGHT=276 ShowControls="1" ShowStatusBar="1" ShowDisplay="1" autostart="0">
</EMBED>
</OBJECT>

You may want to alter the parameters to your preference. In the previous example, most of the values are set to true (or 1) so, the pixels for the height have been added accordingly. You may choose to show, for instance, the status bar, etc. If so, then you need to be sure to add the required pixels to the height of the player. The required pixels are included where it would be necessary.

For the <object> tag use true (yes) or false (no). For the <embed> tag use 1 (yes) or 0 (no).

<object> Tag Parameters

When setting the <object> tag parameters, be sure to always enclose parameter values in double quotation marks.

classid="..." - This tells the browser what filetype will be loaded, and what application should handle it. This should be copied completely.

width and height - When setting the width and height, be sure you set them for at least the width and height of the file itself, however, you must add the additional pixels to the height of the player depending on if and which controls you choose to display.

param name="filename" value="..." - This is the URL to your .wmv file.

param name="showcontrols" value="..."- If set to "true", it will show the video controls (ie. play, stop, etc.). If this is set to false, then no controls will be shown and the viewer will not have any control over the playback. Of course, in this case, you will have to enable autostart or your video will not be shown. Height: 46 pixels

param name="showstatusbar" value="..."- If set to "true", status bar will be shown. If you set the value to true, it will show the status bar. It includes info about the clip such as playback status and buffering progress. This will give the viewer an idea of how long it will be before playback. Height: 26 pixels

param name="showdisplay" value="..." - If this is set to true, info such as the file name will be shown. Height: 74 pixels

param name="autostart" value="..." - If this is set to true, as soon as it has buffered, it will being playback. If set to false, the end user will have to start playback.

<embed> Tag Parameters

The <embed> tag basically is a duplicate of the <object> tag with few differences.

All the parameters, ie. embed src="....wmv" width="..." height="..." play="..." loop="..." quality="high", are the same.

type="..." - This specifies the MIME type of the <embed> file. This, iin turn, determines which plug-in to load. For a visible plug-in, you must include both the WIDTH and HEIGHT attributes if you use TYPE; no default values are used.

Ok. Now that you are equipped with the code, all you have to do is place it where you want it in your Web page.

Give it a try and see how it looks. Don't be afraid to experiment! That's the only way you'll know how to place it the way you want in to be displayed on your Web page.

If you want to use a different file format, just choose one.