Created On:
19/04/2007
Author:
Aaron Robson
Tags:
FlashReplace, Javascript, Event Selectors, Unobtrusive

Unobtrusive Flash Replacement

20 April 07: Updated to latest version of Roberts script, but slightly modified script to use Prototype for replacing url element - meaning no container div is required. Also removed id of object tag - not entirely sure why I'd want it...

My updated script can be seen here - FlashReplace.js.

Robert has released a lightweight javascript library called FlashReplace for including Flash videos in a standards compliant manner.
I've been using the Event Selectors library for a while to separate Javascript behaviour from the presentation, so I thought I'd try them both out together.

The event selectors rule looks like:

'a[rel=live]':
    function(lnk)
    {
        var lnkHref = lnk.getAttribute("href");
        var width = 425;
        var height = 350;
        FlashReplace.replace(lnk, lnkHref, width, height, null, {wmode : "transparent"});
    }

This means I can just use the rel attribute of a normal anchor to specify an embedded video. Also I include the FlashReplace.js file in the document head.

So we have:
<a rel="live" href="videosource.swf">A Video</a>

If Javascript is enabled, the user sees an embedded video, otherwise they just get the normal URL to follow.

The result can be seen here:
Further enhancements could include obtaining the width and height from an inline (yuk) style or className, and perhaps having an alternate URL to degrade to instead of the raw video source.

Cheers Robert!

Comments

Bryan Peters -
Great idea! I could definitely use this in a CMS situation where end-users don't know how to embed flash. One problem: doesn't seem to work in IE7 on Vista.
Aaron -
Hi Bryan - Have you got it working in IE7 / XP (that's definitely working here)? I haven't gone down the Vista route yet, so I can't test! The script doesn't show any 'you don't have flash installed' gubbins, so I wonder if it could be that ? I did try it in a standalone IE 5.5 installation - and it didn't work, but I assumed it was because of the missing plugin.
Jonathan Merriweather -
Works for me in VIsta + IE7...
Aaron -
Good to know, thanks Jonathan.
Bryan Peters -
I've had a related issues with swfobject and IE7/Vista on both my work and home PC. Maybe it's just me, but I'll do some sleuthing either way.
Roy -
http://browsershots.org/http://intrepidnoodle.com/articles/20.aspx