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

Comments

I've successfully embedded a Windows Media Player video on my website, but is there any way that I can add language to keep people from downloading/copying the video from my site?

I really appreciate the help!

no.

if you put it on the net, someone can take it. You can make it harder, but you can't stop it outright.

If it's so important that no one else have it, don't put it online.

This code doesn't work well on Myspace. It will embed the player but you'll see a bunch of the code on top of the video itself and there are no controls on the player. You have to right click it and go to "Play" for the video to start.

you wont need a mac to check how the code will work...you just need the codec that looks for that code. (which is included in the player/plug in for windows media, quick time, and so on) depending on what player you have set as default or mapped for that file name and so on, either quick time or media player will pick up on it...i hope i made that clear. im pretty tired.

No it actually works on myspace fine. You just have to tweak the code...under the embed tag where it says controller="false" you just have to change it to controller="true". Same goes for everything else. Then it works perfectly fine. It's the only code I've found that actually works on myspace too.

... ando how to solve the "press to activate and use this control.."issue for IE7?

Hi Kathy,

Thanks for the great post about embedding Windows Media Files in a website. We're a non-profit arts center. Video clips, for us, are a great sales tool.

Quick question: I don't want clips to auto-run, since not everyone has high-speed connections. But I would like the first frame of the video to display in the WMV window. Do you know how to do that?

Thank you,
Ric Waldman
Capitol Center for the Arts
Concord, NH

nowadays it's a lot easier to play .wmv files on a mac. only .wmv with drm can not be displayed. but as far as i know from windows users drm can be quite an issue on a pc as well.

first option is to download windows media player for mac and the other is to download a quicktime plugin that plays .wmv files directly in quicktime. advantage of playing .wmv in quicktime is the ability to stop exactly on a frame you wish (for screengrabs/stills) instead of globally around it with the microsoft player.

windows media player for mac:
http://www.microsoft.com/mac/downloads.aspx?pid=download&location=/mac/d...

play wmv files on Quicktime via flip4mac plugin:
http://www.microsoft.com/mac/otherproducts/otherproducts.aspx?pid=window...

not competabled whit firefox!

Hey,

This code is NOT a w3c transitional code.

I have tried my best, but it keeps saying that the attributes inside the EMBED tag is not valid. What do I do?

There is no seen problem while I am streaming the "audio only" and I am going to stream only the audio (SHOUTcast), but I just don't like having errors on my page (w3c errors) :(.

hey there, for all you myspacers, put your video on youtube and use this:

with the "http://www.youtube.com/v/el-e3NRb9To" part being the link to your vid this should work great.