html - Is there a standard copy-paste way to safely put a SWF in a web-page?

Question

While embedding a SWF in HTML is not too hard, there are a few subtleties for different browsers, detecting if Flash is installed, etc. For enabling AJAX, there are standard chunks of code you can use to save the hassle of coping with all cases... is their a similar 'reference implementation' to embed a SWF which covers all the bases?

Answer 1

Is there a standard? Sadly no. The desirable points of a Flash embedding method are:

1. modern browser compatible
2. IE compatible
3. ancient browser compatible
4. standards-compliant
5. supporting streamed Flash (play before the whole file is downloaded) in IE
6. Don't Repeat Yourself
7. allow fallback content
8. no JavaScript reliance

but there is no one bunch of markup that satisfies all these points. Point 6 is impossible to achieve fully but some solutions fail worse than others.

About the simplest markup you can get away with is the version outlined in the classic Flash Satay article:

<object type="application/x-shockwave-flash" data="file.swf" width="x" height="y">
    <param name="movie" value="file.swf" />
    (Non-Flash content here)
</object>

The ALA article complains that this version won't prompt the user to download Flash if it isn't installed; personally I see this as a plus point. But it still fails on points 3 and 5. Point 5 may or may not matter: if your Flash file is a simple application, media player or loader stub it doesn't matter at all, but if it's a big animation it can be unfortunate.

Maybe point 3 doesn't matter any more; no-one's really using Netscape 4 or IE4 these days. But if it does to you, you need the old-school embed tag. This is also supported by modern browsers so that means you can use the ActiveX method for the outer object, so you get streaming in IE:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="x" height="y">
    <param name="movie" value="file.swf" />
    <embed type="application/x-shockwave-flash" src="file.swf" width="x" height="y" />
</object>

This is the ‘traditional’ method of embedding Flash. It fails on points 4 and 7 and is slightly worse on point 6.

The third approach, used by libraries such as SWFObject is to use JavaScript to choose the best way to instantiate Flash on the current browser. This can hit the all the above points except, naturally, 8. Some libraries offer ways to mitigate that by also including static object markup, trading point 8 for point 6.