moddular

Standards Compliant Flash

30th December 2004

For some time there has been interest in creating a standards compliant way of embedding a Flash movie into a page. The basic code from Macromedia that is created when a movie is published works reliably, however there are a couple of problems. Namely it requires the use of the non-standard embed tag, a problem if you want your pages to validate. It is also a little on the bulky side. Several alternative methods have been suggested to solve these issues with varying degrees of success.

Flash Satay

Originally proposed by Drew McClellan in an article published at A List Apart, the Flash Satay method doesn’t require the use of the embed tag. Instead it rewrites the object tag in such a way that can it’s usage isn’t just restricted to Internet Explorer on Windows. It also has the advantage of offering considerably neater markup than the Macromedia default. That’s the good part, however there is a downside too. Due to a bug in IE’s handling of the object tag movies displayed using this method will not stream correctly in that browser. This issue can be resolved with the use of a small container movie to trigger the download, however it is a bit of a hack and slightly inconvenient. Still if this were the only problem I would definitely consider this method a winner. Unfortunately a few other things stop Flash Satay from being a really usable solution. In some browsers the use of this technique causes the movie to break, resulting in the display of what appears to be a broken HTML textarea instead of the movie.

There is also the minor annoyance that because the code no longer contains a codebase attribute we lose the useful player version checking in Internet Explorer on Windows. If you know your movie requires some feature not supported until a specific version of Flash player the codebase could be used to prompt users with an older Flash player to download an upgrade. For example Flash player 6.0.40.0 introduced some nice new features including the ability to mask device text using the movie clip setMask method. Using the following codebase attribute you could make sure users on (IE Win) had a version of Flash player that supported this.

codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,40,0"

Pros

No embed tag so can be used in valid HTML or XHTML pages
Beautifully next markup

Cons

IE streaming bug requires the use of hacks to work around
Unreliable display
No codebase — removes useful player version checking in IE
The param tags are unsupported in Safari

Hixie’s Method

Despite apparently not being the worlds greatest fan of Flash (Flash is a proprietary language and thus inherently evil and should never be sent over the wire), Ian Hickson has provided another solution that conveniently works around many of the problems associated with the Flash Satay method while still not requiring an embed tag. Hixie’s method uses the original markup generated by Flash for the object tag used by Internet Explorer. This means the codebase attribute remains intact, giving us back our automatic player version check in IE. However instead of using an embed tag nested inside the object tag to provide content for other browsers (as in the default Macromedia code), this method employs a second object tag. Since we don’t want IE to see two object tags the nested one is hidden from it using Conditional Comments.

Pros

No embed tag so it will validate
Resolves the weird display and streaming issues of Flash Satay
Allows automatic player version checking for Internet Explorer

Cons

The markup is even more bloated than the Macromedia original
The param tags are unsupported in Safari

The JavaScript Method

With the EOLAS patent row it looked possible that Microsoft would be forced into making changes to Internet Explorer so that content embedded into a page would not be displayed seamlessly. Hence it was necessary to find a new technique for embedding Flash that would work around any such changes. The solution was to place the code for embedding the movie in an external JavaScript file and use the document.write() method to insert it into the page. This technique has also been suggested as a means of generating standards compliant markup. Whilst these pages may pass through the validator without error they are still using invalid markup, they only appear to be valid because the JavaScript is hiding the invalid tags from the validator.

There is also the small problem (which admittedly won’t effect many people) that up until now I’ve only seen this technique written using document.write which doesn’t work in pages served as application/xhtml+xml. To try to workaround this and other issues I’ve written some JavaScript to embed movies that doesn’t rely on document.write.

For most modern browsers it uses the DOM methods to insert markup based on the Flash Satay. For Safari it again uses the DOM, but this time to insert an embed tag in an attempt to workaround that browsers problems with the param tags — since I don’t have a Mac I can’t test this so feedback would be very welcome (Yes I know I just said hiding the embed tag from the validator was cheating, but this is a special case ;)). Older versions of Opera (prior to version 8) use innerHTML instead of the DOM methods. Internet Explorer gets the full Macromedia style object tag also inserted via innerHTML.

Updated: I’ve updated the script slightly making use of my DomInnerHtml class to allow alternate content to be included.

How it Works

An object is created via a call to the makeFlashObject function. This function accepts the following arguments,

src: The filename of the swf file.
width: The width of the movie, either in pixels or a percentage, eg 500 or 100%.
height: Like the width, but in a different direction.
align: The alignment of the movie, possible values are an empty string, left, right, top or bottom.
id: An id to be able to target the movie with JavaScript, if omitted this defaults to the filename of the movie minus the file extension.
version: The target player version. Used by Internet Explorer, eg 7,0,0,0 for Flash player 7. If omitted this defaults to 6,0,40,0.

The object returned by this function has the following methods,

addParam: Adds a parameter to the movie. Accepts two arguments, the parameter name and the value.
addAlternate: Adds alternate content for the movie. Accepts a single argument which is a string of well-formed XHTML.
write: Writes the movie to the page. Accepts a single optional argument of the id of the element to create the movie inside. If this is omitted the movie will be appended to the end of the body of the page.

For example,

var obj = makeFlashObject('login.swf', 550, 400);
obj.addParam('menu', 'false');
obj.addParam('bgcolor', '#ffffff');
obj.addAlternate("<p>Can&#8217;t see the movie? 
    Try the <a href="textonly.html">Text Only</a> version.</p>");
obj.write();

If you like you can view an example and download the JavaScript source files. Any bug reports are welcome, remember the DomInnerHtml class also needs to be included in the page for this to work — DomInnerHtml is used to add the alternate content for browsers that insert the movie using the DOM methods.

Conclusion

Currently Hixie’s Method is my preferred technique to embed simple Flash movies. However in cases where the param tags may be significant I think I might start making use of my JavaScript classes. While it might be a bit of a cheat still serving the embed tag to Safari I think it is worthwhile (assuming it works ;)) I would like to do some more extensive cross browser testing, I think I need a Mac…

Permalink. Posted on 30th December 2004 in Flash, Web Standards.

Comments

Testing quote links
# Posted by Andy on 10th June 2005.
Testing skipping to comments…
# Posted by Andy on 18th October 2005.
Testing comment

changes
# Posted by Andy on 25th December 2005.
Testing comment
changes again.
# Posted by Andy on 25th December 2005.
Some updated Javascript - Using JavaScript to insert Flash content in XHTML pages.
# Posted by Andy on 1st May 2006.