Using Flash And Staying Standards Compliant

Anyone who has ever worked with Flash on the web has likely come across the fact that embedding flash into a web page is usually no walk in the park. The code that Flash gives you to embed is something like this:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="650" height="117" id="test-flash-banner" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="test-flash-banner.swf" /><param name="quality" value="high" />
	<param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />
	<embed src="test-flash-banner.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="650" height="117" name="test-flash-banner" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

It’s not surprising why it was done this way…it works. But the way it works is through brute force (sometimes called the “Twice Cooked” method) and including more than what is needed for most browsers. The biggest problem is the <embed> tag which is invalid code which will cause your page not to validate as standards compliant.

This has been a problem for a long time. There is even an 2002 A List Apart article: Flash Satay: Embedding Flash While Supporting Standards. Five years later, they are still talking about it.

Fortunately for us, some smart folks have taken this problem under wing. There are now a variety of ways to handle standards-compliant flash embedding. Here are some options:

<swfobject>

Swfobject is the big kid on the block. Some previous projects now even consider themselves deprecated and refer to swfobject. Swfobject is open source and hugely robust, especially now very recently gone v2.0. There are two options for embedding flash with swfobject, and both are standards-compliant. Since they are just simply too many features to mention here, I will just mention a few that stand out to me:

• Auto-detects Flash version and behaves accordingly
• Can offer to auto-upgrade your Flash version
• Offers alternative content when it’s the only option, which is also good for SEO
• Brings Flash to devices with very poor Flash support like the PSP
• Eliminates the “click-to-activate” crap in IE

There is even a code-generator companion to swfoject which will help you build the code you need to get started.

Objecty

Objecty is the new kid on the block.

Objecty makes it dead simple to put video and audio on the web. It’s meant to re-swizzle the whole paradigm. (Or something.)

The aim is for dead simplicity, which I love. Basically you just include the objecty javascript file on your page and then embedding media objects on your page is as simple as including an object tag with a unique class. It supports Flash (in both .flv (!) and .swf format), but also supports a ton of other formats: .mp4, .m4v, .m4a, .m4b, .wmv, .mov, .unity

Code is like so:

<object class="ObjectyMe" uri="myFlashMovie.swf" width="550" height="400"></object>

jQuery Media Plugin

If you are already using jQuery on your page, you might consider using the jQuery Media Plugin, which might be the simplest solution yet. It works by targeting anchor elements on the page by class or ID name and replacing it with the appropriate code to place the flash.

jQuery:

$('.media').media();

Markup:

<a class="media" href="sample.swf">My Flash Movie</a>

There is built-in browser detection which will replace the anchor tag with the appropriate code. Because your code will contain no embed code at all in the markup, no need to worry about validation errors.

Like Objecty, this plugin is far from limited to just Flash. Here are a list of the supported formats: asf, avi, flv, mov, mpg, mpeg, mp4, qt, ra, smil, swf, wmv, 3g2, 3gp, aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, ra, ram, rm, wav, wma, bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml. The plugin will even detect the file type directly from the file extension in the href attribute.