Embeding Flash in web page

Even though I tend to avoid Flash, I sometimes have to use it, usually because clients wants it to spice up the web. Thus over time I tried many different ways that would not make the page invalid but all had a flaw or two.

I first used Flash Satay which worked pretty good for me, even though people reported strange cases when it did not work in certain Win ver / IE ver situations. And then it hit me with my friend who had Win98SE, IE 5.5 and Flash 7 installed. For no apparent reason, his install (he actually reinstalled because of this) never detected the Flash and always downloaded ActiveX to install. Always. When using embed, it worked. But Flash Satay method did not work. The Twilight Zone moment came when I made the same install he did and it worked there, but still not for him.

Thus I looked further and found Ian Hickson’s example. His code example worked for my friend as well as in any other test case I tried. Ian’s example had one minor problem – it Flash was not available, it did not show the alternate content in IE.

Combining the past experience on high profiles sites, here is what I use now:

<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
	codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
	width="269" height="34">
<param name="movie" value="assets/countdown_greatbritain.swf" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<img src="assets/countdown_greatbritain.gif"
	width="269" height="34"
	alt="Countdown to British GP - you need Flash to see it" border="0" />
</object>
<![endif]-->

<!--[if !IE]> <-->
<object data="assets/countdown_greatbritain.swf"
	type="application/x-shockwave-flash"
	width="269" height="34">
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" />
<img src="assets/countdown_greatbritain.gif"
	width="269" height="34"
	alt="Countdown to British GP - you need Flash to see it" border="0" />
</object>
<!--> <![endif]-->

This is an improvement on Ian’s idea which entirely separates object tags for Win/IE and everyone else. Validity preserved, all see alternate content, me happy. Here is one example of this code in action. Please let me know if this does not work for you – leave your OS/browser/Flash information in the comments.

Serious IE problem

The one problem that this nor any other HTML code can solve is a bug in IE’s handling of object element.
Take a look at this second example. It will fire Javascript alert on window.onload. However, I have purposely typed the wrong .swf name, so browser will be loading non-existing file.

While Firefox (and all else) will simply acknowledge the fact that file does not exists and continue with page execution – and thus execute the window.onload code – IE will not. It will hang and forever try to download this file, even though it has received 404 error for it. And window.onload will never execute.

So what? you say. Every responsible web developer should make sure that referenced files are present. And I agree. But the problem does not stops there. If one has ad-blocker installed, it could block the Flash ad, and that is equivalent to “file-missing” situation. IE will hang.

Of all the various IE bugs and problems, this one is in my Top 3 must-fix-list for IE 7. I hope it is the same with IE developers.

Another problem is the way ActiveX works. One will get to see the alternate content only when IE has already downloaded the whole plugin installation and asked you do you want to install. If you say no, it shows the alternate content. Very bad user experience in my opinion. But, that’s the way how ActiveX plugin works. Am i wrong here..? Could anything be done to prevent this?

Update: this is actually Adobe’s problem – it’s a bug in Flash plugin for IE.