W3C compliant Adobe Flash embedding
Adobe Flash is still very popular despite the massive improvements in Javascript animation over recent years. However, some important devices such as the Apple IPhone lack the capability to display Flash movies. Because of this and due to my immutable desire to produce W3C compliant HTML, I’ve recently been thinking a little about the method I use to embed Adobe Flash movies in a web page so i wanted to share my thoughts.
There are a number of popular methods for embedding Adobe Flash in web pages. Most people will be familiar with what I’d personally consider the worst method, that is used by Dreamweaver which looks something like this:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" WIDTH="550" HEIGHT="400" id="myMovieName"> <PARAM NAME=movie VALUE="myFlashMovie.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED href="/support/flash/ts/documents/myFlashMovie.swf" quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400" NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>
(Example taken from http://kb2.adobe.com/cps/415/tn_4150.html)
However, if you use this “Dreamweaver-style” markup, your page will not pass the W3C HTML validator. This is due to the proprietary “embed” tag which is used.
There are a number of improved methods available, I will discuss the two which I have the most personal experience of and have settled on over the years, the Flash Satay method which uses pure HTML markup and SWFObject which uses Javascript.
Method 1: Flash Satay
As previously mentioned, the Flash Satay method uses pure HTML markup which looks something like this:
<object type="application/x-shockwave-flash" data="c.swf?path=movie.swf" width="400" height="300"> <param name="movie" value="c.swf?path=movie.swf" /> <img src="noflash.gif" width="200" height="100" alt="" /> </object>
You’ll no doubt immediately notice that the Flash Satay method doesn’t use an embed tag and is therefore W3C compliant.
Pros
- W3C Compliant HTML
- Very simple
- Offers non-Flash-capable alternative content (in the example this is demonstrated by the img tag but you can replace this with any valid HTML you wish)
- Does not require any script libraries of any kind (and therefore no extra HTTP requests)
- Does not require Javascript to be enabled in order to embed the Flash movie
Cons
- No inherent Flash version checking
I have personally tested the Flash Satay method on my IPhone and it works beautifully, the alternative content is displayed which means that IPhone and other non-Flash-capable browsers don’t display a nasty question mark filled box where content should be.
Method 2: SWFObject
SWFObject is (now) a Google Code project which aims to provide a relatively simple method of using Javascript to embed a Flash movie in a web page. The basic principle is that SWFObject will replace an element on your web page with a Flash movie object. Using SWFObject is a 2-stage affair, initially you’d set out your HTML markup for example:
<div class="my_div" id="flash_movie_1"></div>
Then, having included the SWFObject library Javascript file, you’d tell SWFObject the necessary details to allow it to replace your element with your Flash movie, for example:
<script type="text/javascript">
swfobject.embedSWF("flash_movie.swf", "flash_movie_1", "800", "600", "10.0.0");
</script>
Pros
- W3C Compliant HTML
- Offers non-Flash-capable alternative content
- Allows Flash player version checking
Cons
- More complex than Flash Satay (though pretty simple all the same)
- Requires the inclusion of a Javascript library which may require an additional HTTP request and will certainly increase bandwidth consumed
- Requires Javascript to be enabled in order to embed the Flash movie
Conclusion:
Flash Satay offers a slightly simpler, quicker method which fulfils the needs of most developers in most cases and as such, it’s what I personally use unless I need to perform Flash player version checking. If however, the Flash movie requires a specific version of Flashplayer, SWFObject is an excellent method.