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>