How to correctly insert a Flash into XHTML
Although flash is the most spread active element of webpages, a lot of designers still don't know the correct way to insert it into HTML document.. The standard concept, advertised by Macromedia is absolutely unusable.
Just a reminder:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400"> ... <param name="movie" value="movie.swf" /> <param name="quality" value="high" /> ... <embed src="movie.swf" quality="high" bgcolor="#ffffff" width="550" height="400" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> </object>
<object> element are subordinated to needs
of Internet Explorer and they won't work in other browsers. Other browser use
<embed> for the same purpose, but it isn't listed in
HTML or XHTML specifications. The code is therefore not valid and is full of
The biggest problem is in the fact, that it's not possible to provide alternative content which will be displayed to users who don't have flash player (ca. 10%)
Looking for solution
What are the requirements?
- it must work in all major browsers
- it must display alternative content if the Flash plugin is missing
- it must be compatible with Eolas workaround trick
Surely we have to get rid of the
<embed> element. By this
simplification we'll get distinct space for alternative content. The script will
now look like this (example)
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com..." width="550" height="400"> <param name="movie" value="movie.swf" /> <param name="loop" value="false" /> ... <p>This is alternative content</p> </object>
The presented solution will work in IE and Opera and if Flash is uninstalled the alternative content is correctly displayed.
However, script still uses attributes of element
contrary to specification
and therefore Mozilla won't display Flash (it will display alternative content).
Ok, let's get it into accordance.
We'll remove attributes
replace it by correct MIME
path to Flash file. Parameter
movie is then becoming dispensable.
After the changes script will look like this (example):
<object type="application/x-shockwave-flash" data="movie.swf" width="550" height="400"> <param name="loop" value="false" /> <param name="movie" value="movie.swf" /> ... <p>This is alternative content</p> </object>
That will work in Mozilla and also in Opera. In Internet Explorer it won't.
If we returned the above mentioned parameter
movie, IE would have
displayed the Flash (“example”::http://knowhow.davidgrudl.com/…e-W3C-2.html),
but with unwelcome limitation – the progressive download won't work.
Flash will be displayed only after it's file completely downloaded.
Drew McLellan took the same considerations back in 2002 when he came up with a method called Flash Satay, which solved the problem of lacking progressive download by using of additional container Flash. Because of that it has solid problems with accesibility (which doesn't bug me that much) and it also won't work with Eolas workaround trick. And that is indeed a major glitch.
How to combine the two scripts?
We have two notations, varying just in a detail. I've tried number of ways how to put them together. In all of them I met bigger or smaller difficulties. In one case Mozilla doesn't display alternative version, in other IE has problems, etc.
The best thing I could come up with was to completely avoid combining of those two scripts. Inserting both of them to HTML and differentiate them by using of conditional comments.
Code written for IE will be wrapped like this:
<!--[if IE]> HTML code only for IE <![endif]-->
But how to assign a code dedicated to other browsers? For this purpose there exists a negated conditional comment, which is unfortunatelly not valid. We will solve this problem by using of a trick (explanation) and rewrite the comment to this final valid form:
<!--[if !IE]> --> HTML code for all except of IE <!-- <![endif]-->
<!--[if !IE]> --> <object type="application/x-shockwave-flash" data="movie.swf" width="300" height="135"> <!-- <![endif]--> <!--[if IE]> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="300" height="135"> <param name="movie" value="movie.swf" /> <!--><!--dgx--> <param name="loop" value="true" /> <param name="menu" value="false" /> <p>This is <b>alternative</b> content.</p> </object> <!-- <![endif]-->
Maybe it's not a brilliantly elegant solution, but it's only truly functional solution that I have found.
- it's valid
- it's functional in all browsers that I know
- it always show alternative content if the plugin is missing
- it can be combined with Eolas workaround trick
<param>are not doubled
note: because of Opera, don't use
<param name="wmode" value="transparent" />
Kindly translated by creamd