Code. Clarified

Recently I was working on a client’s website and had to embed a simple Flash slideshow in the header. Now I’m not sure if I’ve just overlooked this in the past, but I realized that my page was not validating because of the <embed> tags so popularly used to place Flash on pages today (I don’t work with much Flash to be honest, I’ve been turned off of it for the most part due to traumatizing experiences throughout the 90′s and early 2000′s). So, off I went to search for a fix to this -surely with all of the Flash based sites out there, some had to be valid. That is when I came across Drew McLellan’s article at A List Apart, an amazing resource, and I began reading, thinking, and devising…

Embedding Flash objects is a wildly popular practice on the web. This in and of itself isn’t a bad thing, albeit, like many technologies which have graced the web since its creation, has been improperly implemented in many ways. This is in large part thanks to everyone’s favorite browser, Internet Explorer.

It is a widely held belief that browsers other than IE read Flash files using the <embed> tag. Although this method works, it is not a valid method of including Flash files. Why then is it that we can’t just use the <object> tag and be done with the whole ordeal?

This is where Internet Explorer makes a mess of things for everyone else. By improperly using the classid attribute as well as the codebase attribute the <object> tag is rendered useless in most browsers.

classid is used to define the object to the browser. Internet Explorer uses a proprietary value here to define the player type. This can however, be replaced in most browsers by using the type attribute, in the case of Flash, setting it to “application/x-shockwave-flash”.

codebase is commonly used to check the version of the object to ensure it is sufficiently up to date. The path specified in this attribute is meant to be a relative URI within the domain from which the object is called. Internet Explorer <object> tags use this attribute to link to the Flash update page. By using an external link, the <object> tag is rendered useless in most browsers.

So, using proper markup, the <object> tag should look like this:

<object type="application/x-shockwave-flash" data="/{path-to}/movie.swf" width="300" height="300">
</object>

This will work fine in most browsers, however, as documented by Drew McLellan, this will cause Internet Explorer not to properly stream the movie, as Drew said, this is fine for smaller movies, yet streaming videos other large Flash movies, this is unacceptable. Drew created the Satay method back in 2002, which uses a small container movie to load the larger movie, allowing Internet Explorer to stream the large files. This is an interesting method to me, using the data to not only call up the container movie, but pass it a variable to load the actual movie. I’d like to try and make a working solution without using a Flash container movie (I’m not much of a Flash developer, I like to play with markup, and I want to see how we can get this to work with only markup).

My thought on how to incorporate movies comes with the use of another proprietary hack, however, one that has become quite commonplace in the web world without much concern. Instead of using a container movie, I’ve decided to use conditional comments to serve up one <object> to IE, using the wonderful proprietary settings that Microsoft has decided it would be proper to use, and serve up a properly formatted <object> to the rest of the browsers out there. So, that brings us to:

<!-- NON-IE -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="{path-to}/movie.swf" width="300" height="300">
</object>
<!--<![endif]-->
<!-- IE -->
<!--[if IE]>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="300" height="300">
    <param name="movie" value="{path-to}/movie.swf" />
</object>
<![endif]-->

Mind you, this is a VERY basic implementation of a Flash movie, you will probably want additional <param> tags and attributes in the <object> tags to properly format your movie, but for clarity and proof of concept, I’m keeping things bare-bones simple.

It should also be noted that this method uses little version detection. At present I am unable to test this method using previous versions of the Flash player, I would hope that if the version is out of date, the content within the <object> tags will be read and the user will be prompted to upgrade, however at this time I am unable to confirm this.

Now this is all well and good for hard coded websites, however, with blogs now taking up quite a bit of the Internet’s real estate these days, and WordPress sitting high on the popularity charts, a problem arises. Many folks out there would like to embed Flash movies within their posts. The method I outlined above will not work with WordPress as the WordPress editor will not properly support conditional comments for posts (alright, so the entire idea of conditional comments is improper… but such is life). As such, I have come up with a bit of a workaround, which I’m not going to lie, is a bit messy and convoluted -

My method to solve this is, instead of using conditional comments, simply include both <object> codes, and give each a different class, ie. ieflash for the Internet Explorer version, and standardflash to the standard <object> code. In your standard stylesheet, give the Internet Explorer class a display: none; and in your IE specific stylesheet (let’s face it you have one in your site, and if you don’t I say both “congratulations” and “sorry, but make a simple one for these two lines”) reset the ieflash style to display: block; and set the standardflash class to display: none;

As the browser should not try and render items with a style of display: none; I am assuming that this will not adversely affect load times, as well as fact that both of the movies will be the same file and as such it should only be downloaded once anyway (please let me know if I am mistaken in this thought).

The reasons for these styles are two-fold: browsers will try and block out space for both movies, even if they only display one or the other, causing problems in the layout of your post, as well as the fact that certain browsers (I’ve seen this with Webkit based browsers – Chrome and Safari), will display both the IE coded Flash object, and the standards based object.

So, test these methods out for yourself, let me know your thoughts on the subject, any improvements, ideas, or comments are of course welcome, and be sure to read up on the subject. Although an older resource, Drew McLellan’s post at A List Apart is an excellent resource and has given me much more insight on embedding Flash objects on my pages. I will continue to work on streamlining this method, as well as ensuring as wide ranging support for browsers as possible.

Of course I couldn’t post this without an included Flash movie, so here’s a little something from YouTube:

Edit: After looking back on this method, it may not be the best solution for WordPress based posts. The only real difference between the two <object> tags is where the video is called from, the standards movie uses the data attribute, however this causes IE to not stream the movie correctly, and instead to allow streaming, uses a <param> tag to point to the movie. Given that this is the only difference, it may be better to use Javascript to strip the data attribute from the <object> tag(s). This is relying on the idea that hopefully if your audience is using a plugin such as Flash player, they have Javascript enabled, not a long-shot assumption by any means, but my goal in this was to find a pure HTML based solution.

The real trick with this has been integration with WordPress. The conditional comment method I mentioned will allow you to embed the default, nasty <object> tag that IE likes, without it counting against your markup validation – although this is based on a bit of a hack, so I’m sure critics may call me out on this (sorry, I’m not in on developing IE, we as developers just have to deal with it).

Again, this method really doesn’t have a strong check to ensure proper version of Flash player either. It relies on a very basic default check. Those who work more with Flash may have a better solution to this – if your Flash movie requires a very recent version of the plugin, this method may not be for you.

Comments, thoughts, ramblings on the subject all welcomed, let me know how you feel about this method