<object id="FlashAd" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="100" width="500">
<param name="movie" value="/resources/banner.swf">
<img src="http://www.blogger.com/resources/banner.gif" />
</object>
Where the movie parameters defines URL of a Flash movie, and <img src="http://www.blogger.com/static/alt_z_domu.JPG" /> represents the alternative content - GIF-image displayed in the place of the Flash movie in case of Flash Player absence. The code for FF is slightly different:
<object type="application/x-shockwave-flash" data="/resources/banner.swf" height="100" width="500">
<img src="http://www.blogger.com/resources/banner.gif" />
</object>
Here URL of the Flash movie is defined by the data attribute of the <object> tag. The alternative content is defined the same way. So the problem is how to combine this two <object> tags so that only one Flash movie will be visible. After googling for some time (it took me really long) I couldn't find working solution to the problem. Most of articles referred to the SWFObject Javascript library, which didn't want to work in my simple case (at least in IE 6). By the way, I think it's usage in the static case is not defensive at all. Rest of posts suggested to inject FF's <object> version into IE's one, so we get something like this:
<object id="FlashAd" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="100" width="500">
<param name="movie" value="/resources/banner.swf">
<object type="application/x-shockwave-flash" data="/resources/banner.swf" height="100" width="500">
<img src="http://www.blogger.com/resources/banner.gif" />
</object>
</object>
But next problem appears: there is no place for one common alternative content, which will be shown both in FF and IE. Another problem here is that both flash object's will be rendered by IE6.
The GoogleCode project for SWFObject suggested to use freaky conditional comments of IE:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="420" width="780">
<param name="movie" value="myContent.swf">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myContent.swf" height="420" width="780">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
But I have found this approach broken, it works correctly only for FF, which can't comprehend conditional comments and reads them as normal comments, so finally it gave nothing.
So what is the solution? Solutions is to use conditional statements and the <comment> tag.
<object id="FlashAd" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="500" height="100">
<param name="movie" value="/resources/banner.swf">
<comment>
<object type="application/x-shockwave-flash" data="/resources/banner.swf" width="500" height="100">
<img src="/resources/banner.gif" />
</object>
</comment>
<!--[if gt IE 5]>
<img src="/resources/banner.gif" />
<![endif]-->
</object>
Only IE can understand both, other browsers are not aware of how to render <comment> tag, so they just step into it and render its inner HTML. One of the drawbacks of the described approach is the necessity to duplicate both <object> tag and the alternative content. But it works and that's why is good! :)
