Embed Flash and Video via the object Tag
![[ Macromedia Flash ]](https://perishablepress.com/wp/wp-content/images/2007/misc-chunks/embed-fash-video-object.png)
Here is a collection of code snippets for embedding Flash and video using the HTML <object> tag. Useful for sites showcasing dynamic multimedia content.
Embed Windows Media Player via object tag
Here is the general format for including .wmv files:
<object type="video/x-ms-wmv" data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280">
<param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
<param name="controller" value="true" />
<param name="autostart" value="true" />
</object>Embed Windows Media Player via object and classid
Here is the general format for including .wmv files using classid:
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" id="player" width="340" height="280">
<param name="url" value="http://www.domain.com/path/to/winmovie.wmv" />
<param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
<param name="showcontrols" value="true" />
<param name="autostart" value="true" />
<!--[if !IE]>-->
<object type="video/x-ms-wmv" data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280">
<param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
<param name="controller" value="true" />
<param name="autostart" value="true" />
</object>
<!--<![endif]-->
</object>Alternate version
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" type="application/x-oleobject" width="340" height="280"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902">
<param name="filename" value="http://www.domain.com/path/to/winmovie.wmv" />
<param name="showcontrols" value="true" />
<param name="autostart" value="true" />
<!--[if !IE]>-->
<object data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280" type="application/x-mplayer2">
<param name="pluginurl" value="http://www.microsoft.com/Windows/MediaPlayer/" />
<param name="controller" value="true" />
</object>
<!--<![endif]-->
</object>Embed Google & YouTube Videos via object tag
Here is the general format for including Google and YouTube Videos:
<object type="application/x-shockwave-flash" data="http://video.google.com/googleplayer.swf?8755581808731033658" width="400" height="326" id="VideoPlayback">
<param name="movie" value="http://video.google.com/googleplayer.swf?docId=8755581808731033658" />
<param name="FlashVars" value="playerMode=embedded" />
<param name="allowScriptAcess" value="sameDomain" />
<param name="scale" value="noScale" />
<param name="quality" value="best" />
<param name="bgcolor" value="#FFF" />
<param name="salign" value="TL" />
</object>Embed QuickTime Movies via object tag
Here is the general format for including QuickTime Movies*:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="340" height="280">
<param name="src" value="http://www.domain.com/path/to/qtmovie.mov" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
<!--[if !IE]>-->
<object type="video/quicktime" data="http://www.domain.com/path/to/qtmovie.mov" width="340" height="280">
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="true" />
<param name="autoplay" value="false" />
</object>
<!--<![endif]-->
</object>* Note: QuickTime movies will not autoplay in IE using this method.
Embed Flash via object and embed
Here is a generalized version of the standard method of including Flash content:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="400" height="300" id="movie" align="center">
<embed src="movie.swf" quality="high" width="400" height="300" name="movie" align="center" type="application/x-shockwave-flash" plug inspage="http://www.macromedia.com/go/getflashplayer" />
<param name="movie" value="movie.swf" />
</object>Embed Flash via object tag
Here is the first step for including Flash content in web pages using only the object tag:
<object type="application/x-shockwave-flash" data="container.swf?path=movie.swf" width="400" height="300">
<param name="movie" value="container.swf?path=movie.swf" />
</object>Using the code above, you will also need to create and use a “container” movie. The container movie serves only to launch the actual movie that you wish to display. Simply place the actual Flash movie into the first frame of an otherwise blank container.swf movie and add the following code to the same frame:
_root.loadMovie(_root.path,0);The previous code snippet inserted into the first frame of a Flash movie is equivalent to:
_root.loadMovie("movie.swf",0);The final step for including Flash content using this method compensates for the removal of the codebase attribute. The codebase attribute prompts the browser to upgrade or install the player, if required. To provide this functionality to users, include a blank Flash movie via the standard method (above) and call it from the site index or other strategic location.
Alternate version
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="400" height="300"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0">
<param name="movie" value="movie.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="quality" value="high" />
<!--[if !IE]>-->
<object data="movie.swf" width="400" height="300" type="application/x-shockwave-flash">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
<param name="bgcolor" value="#ffffff" />
<param name="quality" value="high" />
</object>
<!--<![endif]-->
</object>Embed “small” Flash movies via object tag
Using the method just described, it is possible to include small Flash movies (ads, deco, buttons, etc.) without using a container file:
<object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
<param name="movie" value="movie.swf" />
</object>Serve alternate content for users without Flash
Here are two generalized methods for including alternate content for users without Flash. The first method employs a container movie.
<object type="application/x-shockwave-flash data="c.swf?path=movie.swf" width="400" height="300">
<param name="movie" value="container.swf?path=movie.swf" />
<img src="no-flash.gif" width="400" height="300" alt="Get Flash Player" />
</object><object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
<param name="movie" value="movie.swf" />
<param name="quality" value="high" />
<param name="menu" />
<div id="menu">
<ul>
<li><a href="http://domain.com/index.php" title="Go to the home page">Home</a></li>
<li><a href="http://domain.com/archive.php" title="Go to the archive page">Home</a></li>
<li><a href="http://domain.com/about.php" title="Go to the about page">Home</a></li>
<li><a href="http://domain.com/faq.php" title="Go to the FAQ page">Home</a></li>
</ul>
</div>
</object>As always, questions and comments welcome :)
6 responses to “Embed Flash and Video via the object Tag”
Perfect!!!!!! Absolutely perfect!
I’m bookmarking it, and I’m linking to it, and I’m emailing it to my friends. A great resource right here.
A guy I knew had this validation bent when he suddenly realised that your page isn’t even HTML if it doesn’t have alt text on every image – and the alt text should be blank for generic widgets – and it is an ALTERNATIVE, not a DESCRIPTION. “ASDF LOGO” is WRONG if the logo says “ASDF” (although correct if it actually has the word “logo” ON it.
(Really, most people will never understand this)
Sooo, he tried to get rid of every single error and every single warning from the validator.
Some of his alt text is still wrong, so that is fake validation.
He moved from a strict doctype to a transitional doctype… Personally I’d probably rather have it validate as transitional but call it strict, if it’s HTML.
And on one particular page, he has a flash movie. So he spent what seemed like hours and hours and hours trying to find a “valid” way to play the movie.
I would be tempted to let it slide for the one page, as HTML5 will include embed anyway.
But, no, he had to get it valid.
He found an article on A List Apart or something, explaining in depth how and why to get HTML4 Valid code for loading a flash movie, that worked in all browsers, using object tags alone.
Honestly it felt like he played with it for 90 minutes. He must have been multitasking. In the end, he failed. So I tried it, it worked perfectly — for some reason it didn’t work for him and he went to bed.
Seems pretty simple at this point. In retrospect I guess his flash plugin had crashed (this is what flash is good for, after all) and somehow magically not taken out the browser.
But the html spec goes to great length to explain objects, and we all know that Internet Explorer is the only browser that doesn’t support them properly – but that can do flash and a couple of other things, so it’s OK for this.
Simple, use objects, set the type and the path to the data, AND SET THE FALLBACK CONTENT*, and be away laughing.
Late, during the next day, I hear from him again. He claims that he’s found something that works and is valid.
He pastes into the IM window:
– an object, with IE-friendly attribute/value pairs such as CODEBASE
– an embed for fallback content
This is what he started out with, and I’m sure the validator was eating his face for it.
I don’t know, maybe embed is standard. I don’t use plugins in any of my stuff if I can help it, but I do know how object is supposed to work, and I like to use it for basically anything and everything.
*FALLBACK CONTENT is utterly essential. imho you should not use objects at all if there is no fallback content. Some validator I used actually included this as a criteria for a pass – but you’re generally not going to use an object to NOT link to something, so it makes a lot of sense to plan for the inevitable day that:
– microsoft releases a patch which renders 40% of your visitors unable to see the linked object
– adobe releases a patch that incrementally breaks your content for your userbase and you don’t even know that the cancer is broken
– http or tcp hiccups happen
Oh yeah, I meant to say, the ALA article said to use a wrapper movie (for IE, so you didn’t get a dead player) AND it said you should include some linked to some file in your document head, to ensure that your visitors have the correct flash version…
EPIC FAIL.
Better to leave it to chance, or write a PROPER support detection method. I say “proper” because slide.com tells me to upgrade to at least flash 8 before I can view any of their content – and I’m using flash 10.
10 comes after 8, but I guess they’re either blocking me for being outside of the 8 and 9 club, or for my first digit being a 1 (as 1 is lower than 8 and 10 starts with a 1)
But yes, three http requests (version check, wrapper, goal) for just one movie seems like total overkill.
I blame Internet Explorer.
Thanks for the incredible comments! Your story is a familiar one.. I remember struggling with much of the same thing several years ago. I had a site that required three different user-selected videos looping in sequence on the main page. Getting it to work the way I wanted while trying to keep everything valid, optimized, usable, accessible, and etc. was time-consuming and stressful, but taught me a great deal about the various methods available for embedding flash and video into web pages. Here is another article that provides some great methods for embedding Flash. Take home message? As you say, blame it on Internet Explorer! ;)
Thanks, you guys are great!
Thanks a lot for the informative page. It helped me to complete my assignment – adding a video on xhtml 1.0 transitional.
That’s awesome, Doreen — glad to hear the article helped you finish your assignment! Thanks for the feedback :)