EMBEDDING A VIDEO FILE - Played in WMP

See also:

• Embedding an audio file (played in WMP)
• Embedding a flash file (swf) (any flash application)
• Embedding a Quicktime player (mov, qtl, mp4 files)

Back to EMBEDDING MEDIA ON A WEB PAGE ...

Here I will show 2 solutions, both good, both valid. The recommended solution for getting rid of the "Click to activate this control" message in IE is lower on the page.

The WMP Solution Based on the Satay Method

Here is the original code snippet that works in all browsers, except as noted above about MSIE.

As an example I will use a Windows Media meta file - wvx or asx. Since that is designed for streaming, it is more appropriate for embedding than the actual video file itself. In this example the video has a frame size of 320 x 240 pixels. The width defined for the object is the same, but the height will be the height of the frame plus 123 pixels for the additional controls shown. Unfortunately Firefox does not show the media information.

NB: This code is for a document with an XHTML doctype. For an HTML doctype or no doctype at all, ALL tags that are closed with a /> MUST be closed with only a >.

<object id="MediaPlayer1" width="320" height="384"
	data="video-file.wvx"  
	type="application/x-mplayer2"
	title="Title of this video object" 
	style="background-color: #000000;" >
		<param name="filename" value="video-file.wvx" />
		<param name="height" value="384" />
		<param name="width" value="320" />
		<param name="autoStart" value="1" /> 
		<param name="autoPlay" value="1" /> 
		<param name="AnimationatStart" value="1" />
		<param name="showdisplay" value="1" />
		<param name="TransparentAtStart" value="0" />
		<param name="ShowControls" value="1" />
		<param name="ShowStatusBar" value="1" />
		<param name="ClickToPlay" value="0" />
		<param name="bgcolor" value="#000000" />
		<param name="volume" value="100%" />
		<param name="InvokeURLs" value="0" />
		<param name="loop" value="0" />
      <em>Description of this video object</em>
</object>

Please note this little peculiarity: normally parameter values set to "true" or "false" are equivalent to setting them to "1" or "0" respectively. In Firefox, for some inexplicable reason, using

<param name="autoStart" value="0" />
<param name="autoPlay" value="0" />

works as intended (i.e. not to autostart or autoplay) whereas

<param name="autoStart" value="false" />
<param name="autoPlay" value="false" />

does not, thus it will still autostart/autoplay regardless of the value used. In fact this same "logic" or lack thereof appears to apply to all the other parameter values in Firefox, so I've opted to use the numeric values for all of them.

Incidentally it appears that it's not necessary to specify both autostart and autoplay and that autostart alone is sufficient. In the end, setting both autostart and autoplay to the same value seems to be the best option. Autoplay appears to be associated with Quicktime Player (thus probably not relevant for WMP).

Also note the style applied to the object itself. The background color is needed for Firefox to not show a blank area while it loads the image. It's a matter of choice whether you use that or not, since thre may be cases where you want to not show a black square anyway until such time as the image gest loaded.

An example of a lo-fi embedded streaming video file (the original video clip is here):

In the above example the assumption is that the necessary plugin is installed in the browser. That in itself is a challenge in all browsers other than IE, but that is a different problem. There exists a Windows Media Player for the MAC as well, so Windows Media files need not be avoided. They are excellent at lower bitrates (i.e .less than 128kbps) - thus can be streamed most adequately by using the pseudo-streaming techniques described before.

The WMPObject Solution

This solution is extraodinarily easy to use. It requires javascript for the Windows Media Player to be viewed, which is a reasonable requirement. In the absence of javascript, alternate content is served, which is highly recommended in any case.

Two scripts are to be included in the head section of the web page: WMPObject.js and myWMPlayer.js. Both are available for download as a zip file here.

In the body of the page, in the place where you want the video file to be displayed, open a <div id="my_video_id"> (and provide the alternate content to be shown if javascript is not enabled.

Right after closing this div, place another simple script which will serve to insert the WMP video object.

  
<div id="my_video_id">
   <p>This content is what is displayed instead of the WMP object
   itself. It can be text, an image, anything that's appropriate.
   It will all be replaced by the WMP object if javascript is enabled.
   It can be placed in a defined height div with scrollbars as well.
   </p>
</div>

  <script type="text/javascript">
<!--
// this script ultimately replaces the image in the 
// div id="video" above by the WMP object
// let's get this video played 
// We need to provide values for: 
//		myvideoid,myfile,width,height,showcontrols,	
//		showdisplay,showstatusbar,autoplay,autostart 
// this movie has width=320 and height=240 
// adding showcontrols alone needs 120 px added to the height
//                          ==> so height = 360 
// adding showstatusbar alone needs 100 px added to the height 
//                          ==> so height = 340 
// adding both showcontrols and showstatusbar together need 144 px
//                           added to the height so height = 384 

// whatever div id you used above for the video
	var myvideoid = "my_video_id"; 
	
	var myfile = "sample-video.wmv";
	var width = 320;
	var height = 384;
	var showcontrols=1;
	var showdisplay=1;
	var showstatusbar=1;
	var autoplay=1;
	
// should be set to the same value as autoplay
	var autostart=1; 

	myWMPlayer(myvideoid,myfile,width,height,showcontrols,
		showdisplay,showstatusbar,autoplay,autostart); 
// --> 
</script> 

Here are some examples using WMPObject. The first example, for video, has been coded exactly this way.

A special test is available for an AVI file as well. This presents an as yet unsolved (or incompletely solved) problem in Opera 9.10, in particular in Windows Vista.

If you guessed that this is the same solution as for playing audio in an embedded Windows Media Player, you've just won!

NB: These scripts are a work in progress. Please revisit this site in order to find the latest versions. Also please let me know of any limitations or bugs you may have found, whether concerning differnt operating systems or browsers than what I have been able to test myself.

• Embedding audio file
• Embedding a flash file

Back to EMBEDDING MEDIA ON A WEB PAGE ...

Ads