Embedding Windows Media and QuickTime Video on a Web Page

September 24, 2005

After several weeks of false starts and deadends, I've finally come up with what seems to be the best solution for displaying video on a web page. You can use a streaming server, but I had so many problems getting it to work that I finally gave up and decided to use http.

To begin, you'll probably want to create two versions of your video: a Windows Media (.wmv) file for Windows users (Windows Media comes bundled with Windows) and a QuickTime (.mov) file for Apple users and others who don't have Windows Media or who don't want to run ActiveX, which Windows Media requires.

Compression Is Key

To start, you need to compress your video down to the smallest possible size. I found out that a program like Premier just can't do the job. You need a mega-compressor like Discreet Cleaner (now called AutoDesk Cleaner). Cleaner took a 95 MB video and compressed it to a 2.5 MB .wmv and a 3.6 .mov file--and they looked good. Now that's amazing.

Once your video is compressed, you'll upload it to your server. If you want, you can just link to it on your page like so--<a href="http://www.yourdomain.com/video.wmv">Windows Media Video</a> or <a href="http://www.yourdomain.com/video.mov">QuickTime Video</a>. But that will cause the player to open separately and the file to actually download, rather than stream. The user will have to wait for the entire file to download before they can view it.

Embedding Windows Media Player

A better way is to stream the video to a player you embed right on your web page. To embed Windows Media so that it would play equally well in Internet Explorer and Firefox/Netscape, this is the code that worked for me:

<OBJECT id='mediaPlayer' width="320" height="240"
classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase='http://activex.microsoft.com/activex/controls/ mplayer/en/nsmp2inf.cab#Version=5,1,52,701'
standby='Loading Microsoft Windows Media Player components...' type='application/x-oleobject'>
<param name='fileName' value="http://mydomain.com/video.wmv">
<param name='animationatStart' value='1'>
<param name='transparentatStart' value='1'>
<param name='autoStart' value='1'>
<param name='ShowControls' value='0'>
<param name='ShowDisplay' value='0'>
<param name='ShowStatusBar' value='0'>
<param name='loop' value='0'>
<EMBED type='application/x-mplayer2'
pluginspage='http://microsoft.com/windows/mediaplayer/ en/download/'
id='mediaPlayer' name='mediaPlayer' displaysize='4' autosize='0'
bgcolor='darkblue' showcontrols='0' showtracker='1'
showdisplay='0' showstatusbar='0' videoborder3d='0' width="320" height="240"
src="http://mydomain.com/video.wmv" autostart='1' designtimesp='5311' loop='0'>
</EMBED>
</OBJECT>

The <OBJECT> is an ActiveX control, and this plays nicely in Windows IE. For people who've disabled ActiveX and for browsers like Firefox and Netscape, we add the <EMBED> tag, wrapped within the <OBJECT> tag, to call the video.

I wanted my video to play without any control bars to distract the viewer. In IE, setting the showControls to 0 (or 'false') is enough to remove the control bar. However, it still shows up in Firefox. Adding the parameters
ShowDisplay and ShowStatusBar and setting them to 0 (or 'false') causes the control bar to disappear in Firefox, as well.

Embedding QuickTime Player

You can also embed QuickTime on your web page and stream a .mov file in much the same way. For users who don't have Windows Media, but do have QuickTime, this option is appreciated. The code I used was this:

<OBJECT classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' width="320" height="240" codebase='http://www.apple.com/qtactivex/qtplugin.cab'>
<param name='src' value="http://mydomain.com/video.mov">
<param name='autoplay' value="true">
<param name='controller' value="false">
<param name='loop' value="false">
<EMBED src="http://mydomain.com/video.mov" width="320" height="240" autoplay="true"
controller="false" loop="false" bgcolor="#000000" pluginspage='http://www.apple.com/quicktime/download/'>
</EMBED>
</OBJECT>

Apple provides a whole slew of nifty Embed Tag Attributes that I've found work equally well in IE and Firefox/Netscape.

A wonderful resource for producing the code for embedding players is the Univeristy of California's CIT Embedded Media HTML Generator. You just plug in your parameters and it'll spit out the code. The number of parameters is fairly limited, but you can always add to them.

A Note About Mac

I haven't mentioned how any of this works on a Mac. That's because, at this time, I don't access to one. If anyone can let me know how this code holds up on Mac, I'd be really glad to hear from you.

UPDATE: If comments are closed on this post, send me a reminder to turn them back on. I sometimes forget to check. Please don't write to me asking questions about video. I can't answer 99% of them. I'm no expert—just struggling like everyone else. If I do learn anything new, I'll post about it here. Thanks, everyone!

Kathy