jquery.flash

Let's get started...

First you need to download jquery and jquery.flash (Compressed / Uncompressed) and reference them somewhere in your page, typically these are placed at the top of the page inside the head element, but I prefer to place them just before the closing body element to prevent rendering from being halted, that's up to you though.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.flash.min.js"></script>

Next you need to create an element to replace. Any kind of element will do, but there is some added functionality allowing jquery.flash to automagically grab the url of the video from the href attribute, if present and no url was supplied in the initialization code, so I like using 'a' link elements--they degrade nicely for those with javascript disabled.

<a id="flash" href="http://www.youtube.com/v/Br8zEBwv81Y">Javascript disabled! Click here for video.</a>

Okay, now we are ready to make the switch. This is the absolute minimum usage case--yes, no arguments are required at all! It will inherit the href, class, id, width and height from the original element if nothing is supplied.

<script type="text/javascript">
    $(document).ready(function(){
        $('#flash').flash();
    });
</script>

Let's try something more complex...

Let's have a look at a more interesting case though. Here we have a music player that requires flashvars to define a playlist and various visual styles;

For something like this we would supply a json object as the first argument, notice that flashvars is also json object, it makes it a little more readable that way--query strings are a pain.

<script type="text/javascript">
    $(document).ready(function(){
        $('#flash').flash({
            'src':'http://www.nerdculture.org/wp-content/uploads/audioplayer/mediaplayer.swf',
            'width':'480',
            'height':'300',
            'allowfullscreen':'true',
            'allowscriptaccess':'always',
            'flashvars': {
                'file':'http://www.nerdculture.org/wp-content/uploads/music/playlist.xml',
                'displayheight':'0',
                'backcolor':'0xFFFFFF',
                'frontcolor':'0x666666',
                'lightcolor':'0xFF6600',
                'thumbsinplaylist':'true',
                'width':'480',
                'height':'300'
            }
        });
    });
</script>

Available parameters and attributes are;

id, class, width, height, src, bgcolor, quality, allowscriptaccess, allowfullscreen, flashvars and wmode

If you need access to other attributes or parameters you can change the values of 'availattrs' and 'availparams' in the json object supplied to jquery.flash.

The defaults are;

availattrs: ['id', 'class', 'width', 'height', 'src'],
availparams: ['src', 'bgcolor', 'quality', 'allowscriptaccess', 'allowfullscreen', 'flashvars', 'wmode'],