Html
From Liki
This page is for tips and tricks when writing html.
Contents |
[edit] Embedding Flash
[edit] Object vs Embed
If you've tried to embed flash content on a webpage, you have probably seen cliams that you must have an object tag for windows browsers but an embed tag for firefox. The problem with this is that embed is not a standard supported tag and will not validate. However, we can get by with just an object tag alone.
In a typical flash embed you'd have the following line:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ...>
which, as it turns out, is a microsoft specific active-x directive and it causes Firefox to ignore the entire embed.
But, the function of this line was to tell the browser what plugin to use, but there is another way to do this:
<object type="application/x-shockwave-flash" ...>
and it will work with firefox - well almost. We need one last bit, the data selector:
<object type="application/x-shockwave-flash" data="mymovie.swf" ...>
and now it works with firefox!
One remaining issue that movies will not stream in windows, which can be an issue if they are large, but this can be solved by making a small container movie that dynamically loads the real movie. IE only sees the container, so can emulate the streaming with this trick. We then have a flash that has just the following action script in frame 1:
_root.loadMovie(_root.path,0);
and then pass the real movie name as the variable path as follows. If the container is c.swf we have
data="c.swf?path=mymovie.swf" ... <param name="movie" value="c.swf?path=mymovie.swf"/>
The last remaining issue that the codebase attribute which we're ignoring was used to check for a specific flash version. Seemingly the only way to get around this is to add a 'sacrificial' blank movie loaded with the codebase attribute which will only prompt the user for a flash update and do nothing else:
<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" ...
[edit] Alternative Content
One of the coolest things I learned about using the object tag is that is allows alternative content if the intended flash fails to load, so we can 'detect' flash without using any javascript, which is the traditional method! After the param tags in the object, any normal html can be included and will only be displayed if the flash fails, for example:
<object type="application/x-shockwave-flash" data="movie.swf" width="550" height="400"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="research.swf" /> <param name="bgcolor" value="#fff" /> <p>The Adobe Flash plugin is required to view this menu. Please download it from <a href="http://www.adobe.com">The Adobe Website</a>.</p> </object>
so that the user is informed she needs the flash plugin if the plugin is not present!
