EMBEDDING A VIDEO FILE - Played in WMP
- Embedding an audio file (played in WMP)
- Embedding a flash file (swf) (any flash application)
- Embedding a Quicktime player (mov, qtl, mp4 files)
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.
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" standby="Loading Windows Media Player components..." 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 definitive solution is WMPObject, an adaptation of the SWFObject script for embeded Flash, to work with WMP this time, and developed by Kovan Abdulla of www.imetasoft.com.
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.
Right after closing this div, place another simple script which will serve to insert the WMP video object.
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.