Embedding a Media File

Buy Microsoft Expression Web Professional Design Tool | Get Microsoft Expression Web Upgrade | Microsoft Expression Web Upgrade from FrontPage [Any Version]

Embedding a Media File

Tuesday, January 15, 2008

Embedding a media file causes more problems than it is worth. But people still would like their movie on the website. There are a number of ways to do this - some code might not work in all browsers though. I recommend converting the media to Flash and then embedding Flash into your HTML document. This is the program that I used in this example.

For all purposes of this post, I am using Windows Vista Ultimate (all patches installed) and tested the code in Microsoft Internet Explorer 7.0.6000.16575; Opera Version 6.25, Build 8827; and Firefox 2.0.0.11.

Embedding Flash into HTML

There are even a few ways to do this even. Adobe's method of embedding a Flash movie into your web site is something like

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,40,0" width="550" height="400">
<param name="movie" value="media/lorikeets.swf" />
<param name="quality" value="high" />
<embed src="media/lorikeets.swf" quality="high" 
width="550" height="400" name="myMovieName" 
type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed></object>

You will probably see this OK in Firefox. In Microsoft Internet Explorer (MSIE), you might see "Click to Activate". Now in my opinion, this had to do with large corporations not playing nicely in the sandbox. However, in April, Microsoft should be releasing a fix IE Automatic Component Activation (Changes to IE ActiveX Update).

So what's a web developer like yourself supposed to do in the meantime? You could check out the SWFObject: Javascript Flash Player detection and embed script. Here is an example using the SWFObject to embed Flash.

Also keep in mind that if you are on a *NIX server, file names are case sensitive - meaning filename.SWF is not the same as filename.swf. On a Windows server, it does not matter.

Embedding a WMV File

Embedding another type of media file, like MPG, AVI, or WMV will be difficult since some browsers do not recognize the <object> element. However, this code

<object id="MediaPlayer" width="550" 
height="450" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
standby="Loading Microsoft Windows Media Player components..." 
type="application/x-oleobject" 
codebase="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="filename" value="media/lorikeets.mpg">
<param name="autoStart" value="true">               
<param name="showControls" value="true">
<param name="ShowStatusBar" value="true">
<param name="Autorewind" value="true">
<param name="ShowDisplay" value="false">   
<embed src="media/lorikeets.mpg" width="550" 
height="450" type="application/x-mplayer2" 
name="MediaPlayer" autostart="1" 
showcontrols="0" showstatusbar="1" 
autorewind="1" showdisplay="0">
</embed></object>

will seem to work with MPG, WMV, and AVI files. You will see there are two references to the media (MPG, AVI, WMV) file. Let's try to keep this simple.

<object id="MediaPlayer" width="550" 
height="450" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" 
standby="Loading Microsoft Windows Media Player components..." 
type="application/x-oleobject" 
codebase="http://activex.microsoft.com/activex/controls/mplayer/
en/nsmp2inf.cab#Version=6,4,7,1112">
<param name="filename" value="media/lorikeets.mpg">
<param name="autoStart" value="true">               
<param name="showControls" value="true">
<param name="ShowStatusBar" value="true">
<param name="Autorewind" value="true">
<param name="ShowDisplay" value="false">   
</object>

helps to embed the media file into Internet Explorer, while

<embed src="media/lorikeets.mpg" width="550" 
height="450" type="application/x-mplayer2" 
name="MediaPlayer" autostart="1" 
showcontrols="0" showstatusbar="1" 
autorewind="1" showdisplay="0">
</embed>

will help to embed the video into other browsers. This is why it is important to make sure the path is updated in both places. To locate the path, look for the src attribute.

File Sizes

File size is something else to consider when embedding videos. For example, you probably have seen me attempting to feed the lorikeets at the Denver Zoo by now. In Flash (SWF), the file size is about 3.54 MB and the original height is about 400 pixels and width is 725 pixels. The MPG is about 14.3 MB in size. The AVI is the largest and is 690 MB. The WMV file 889KB. The WMV is the smallest but you will also see that the height and width was reduced as well (for people who are on dial-up).

Embedding Media File Examples

Embedding YouTube

Since YouTube is pretty popular, some people will upload their videos there. And YouTube will actually give you code to use to embed the video on your own web page.

And of course you can see the file on YouTube's website.

The code will look something like

<object width="425" height="355">
<param name="movie" value="http://www.
youtube.com/v/FKNIgPpw-i4&rel=1"></param>
<param name="wmode" 
value="transparent"></param>
<embed src="http://www.youtube.com/v/FKNIgPpw-i4&rel=1" 
type="application/x-shockwave-flash" wmode=
"transparent" width="425" height="355">
</embed>
</object>

So now you might be wondering which way you would like to use? Flash is probably be best way - most browsers have Flash installed. If you would like, I can help you convert your media file to Flash.