Flash XHTML Compliance
The standard HTML code used to display an SWF file is not 100% W3C(The World Wide Web Consortium) compliant. This does not mean that the code will break or degrade a viewers experience.
Overview (for nerds)
The reason that the standard HTML code is not 100% W3C compliant is because there is no "standard" within the HTML or XHTML specification (as defined by the W3C) to display audio or video content within a web page. It is for this reason that a page containing code that displays a multimedia file usually fails to pass any strict W3C validation.
Although all major browsers (e.g. Firefox, Internet Explorer, Safari, etc.) have the capacity to display multimedia files, the HTML code must be set up differently for each browser. It is for this reason why some browsers may display warning screens or messages because the "standard" HTML code contains all of the code for all of the browsers -- the code that the browser does not recognize is flagged or ignored, whereas the code that it does recognize is used to display the Flash file.
The gory details of how the engineers at Macromedia (Adobe) pieced together the "factory
default" standard HTML code that satisfies the requirements for all major browsers is explained below.
Work around
To circumnavigate strict W3C validation errors and / or generate code for a specific browser you'll have to use JavaScript to dynamically write the HTML code when the page loads. In other words, rather than hard-coding the standard HTML, it is written dynamically at run-time with JavaScript. This process essentially hides the "invalid" code from valuators because it's not hard-coded in the HTML, and only writes the HTML code that the browser needs.
By default Wasp Publisher, the Rave Customizer Tool, and Wimpy Button Maker output JavaScript code rather than the standard HTML.
Wimpy MP3 Player is the only exception. The Wimpy MP3 Player Customizer Tool only outputs the "standard" HTML code.
SWFobject is a JavaScript library that is relatively easy to use and can be used instead of the standard HTML code.
Click here to download an example of how to use SWFobject with Wimpy.
Streamlining the HTML code that is used to display Flash.
The following explanation is a condensed version of Drew
McLellan's
original article entitled "Flash
Satay: Embedding Flash While Supporting Standards."
The HTML code used to display Wimpy is the de facto-standard HTML
code that Adobe uses when exporting SWF files via Macromedia
Flash 5-6-7-8:
<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="400" height="300" id="movie" align=""> <param name="movie" value="movie.swf"> <param name="loop" value="false" /> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> <param name="bgcolor" value="#000000" /> <embed src="movie.swf?wimpy=options" loop="false" menu="false" quality="high" scale="noscale" salign="lt" width="320" height="260" name="wimpy" align="middle" bgcolor="#000000" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
The XHTML compliant code used to display Flash SWF files as described
below is:
<object type="application/x-shockwave-flash" data="movie.swf" width="400" height="300">
<param
name="movie" value="movie.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#000000" />
</object>
The <object> Element
In the de facto-standard HTML code used by Adobe to display SWF
files within a web page, two tags are used <object. and <embed>,
resulting in each value being declared twice. The <embed> tag
is used by Mozilla-based browsers and the
<object> tag is used by Internet Explorer-based browsers.
<object> is
part of the XHTML specification as defined by the W3C
consortium.
It is used to load the specified movie. The <param> element
is its partner in crime, offering any number of parameters to be
passed to the player.
<embed> is not part of the XHTML specification
and will prevent your page from validating. Parameters are
passed within the element as name/value attribute pairs.
The <embed> element was created by Netscape
as their method of embedding plug ins and players in web pages.
While most browsers support it (because
it is sort-kinda part of the standard HTML specification),
but since it's not XHTML standards-compliant, we've removed it.
Class ID
classid - (Used by Internet Explorer-based browsers
only) The classid attribute is a number
that is a unique identifier for the necessary ActiveX control needed
to view this page.
The classid number for the Flash Player is:
clsid:D27CDB6E-AE6D-11cf-96B8-444553540000
The classid attribute is specific to ActiveX (Internet
Explorer) but causes Mozilla-based browsers to ignore the SWF object.
However, the classid attribute performs an important
function: telling the browser which Player to use. So we have replaced
its functionality with the "type" attribute:
The Flash Player will respond when
the "type" attribute uses the MIME type of application/x-shockwave-flash .
Therefore, we can remove the classid attribute:
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
... and replace it with the "type" attribute:
type="application/x-shockwave-flash"
Type
type - This attribute specifies the content
type for the data specified by data.
Data
data - This attribute is used to specify the
location of the SWF file.
The data attribute can replace the <param> tag
which is traditionally used to load the SWF file. However using
this method causes Internet Explorer to "hang" until
the entire SWF file is loaded. Normally, when using the <param> attribute,
the SWF file will stream --allowing the remainder of the HTML page
to load at the same time that the SWF file is loading.
<object
type="application/x-shockwave-flash" data="movie.swf"
width="400" height="300">
<param name="movie" value="movie.swf" />
</object>
This is fine for small movies, but for anything serious, the lack
of streaming is unacceptable. To avoid the lack of streaming, see
the "Wimpy Loader" section below.
Wimpy is about 50KB, so the lack of streaming may not be an issue
for you.
Codebase
codebase - Contains a path to a copy of the Flash
plug in-on Adobe’s
servers. The path includes a version number required to view the
SWF file. If the version declared is newer than the Flash Player
Plugin version currently installed in the browser, the browser
will prompt the user to allow it to update.
Example:
http://download.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#version=4,0,2,0
The numbers "4,0,2,0" above indicate the Flash Player
version required to view the SWF file. For the
example above, Flash
4 Player, release version 2 is needed for the embedded SWF file.
Upon encountering this information, the browser checks the version
of the Flash Player installed. If something less than the Flash
4 player is installed, or less than release version 2, the
browser will automatically initiate the plugin download procedure
to get the latest Flash Player plugin if the browser is using
an out-dated Flash Player Plugin. Click
here for the Adobe tech note on the classid and codebase attributes.
This attribute stops the movie from playing in Netscape and Mozilla.
Wimpy Loader
To overcome the lack of streaming, you can employ a method where
a small container movie is embedded within the HTML as described
above. The container movie can then load your "big" SWF using the
loadMovie() actionscript code.
You can use the Wimpy Loader example as the "container." Wimpy
Loader is available from the "tools"
section.
As of this writing, the Wimpy Loader is at the bottom of the page.
Compensating
The main problem with getting rid of the codebase attribute
was that in IE and similar browsers it caused the user to be prompted
to update their Flash plug-in if it was out of date. This is really
useful, as it’s likely the only way that most ordinary
web users get their players updated.
The workaround is simple: just include one sacrificial movie at
the front of your site with the codebase attribute
left in. This needs to be a movie with no purpose within the site—just
a 1k empty blob of nothingness that causes the user to be prompted
if they have an old version of the plug in. Not the cleanest approach,
but a practical one. It shouldn't lose you any friends.
No Flash Plugin
If the browser doesn’t know how to play objects with a MIME
type of application/x-shockwave-flash, it will read
the next child element and give that a try.
<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>
|