Skip to content
Tags

, , , ,

jquery.flash – Who needs swfobject when you have this?

by Qard on October 4th, 2009

I’ve used swfobject many times before in the past, but I just don’t like it. It works well enough, but in the modern web of high-traffic web apps and Javascript frameworks that give you elegant access to DOM elements it just feels clunky having to go back to the ‘old’ way of doing things…so I decided to make jquery.flash!

Why use it? Well for starters it minifies to just over 2 KB, rather than the 10 KB of swfobject! How about automatic plugin and version detection? How about complete cross-browser compatibility? If jquery.flash isn’t a perfect fit for your flash embedding needs then you are just asking for too much. ;)

How do you use it? Just like this;

<script type="text/javascript">
$(document).ready(function(){
    $('.flash').flash({
        "src":"your_flash.swf",
        "width":100,
        "height":100,
        "vars":{"name":"value"},
        "color":"#fff",
        "quality":"high",
        "wmode":"transparent",
        "access":"domain",
        "express":"express_install.swf",
        "classid":"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",
        "codebase":"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=",
        "plugin":"http://get.adobe.com/flashplayer",
        "mime":"application/x-shockwave-flash",
        "version":"9.0.24",
    });
});
</script>

All arguments are optional and will just be left out if you don’t use them unless they have a default. Everything from classid down has a default. Width and Height, when not declared, will use the current dimensions of the element that is being replaced. Flashvars are passed as a json object to ‘vars’ and are automatically serialized into a query string. If there is demand for it I may add a check to allow already made query strings to be used instead of a json object, but it wasn’t really of any importance to me.

If you have any questions feel free to ask. :)

jquery.flash.js
jquery.flash.min.js

From → Javascript, jquery.flash, Projects, Uncategorized, Web Programming

  • http://www.alltutz.com Amin

    Nice tip, just can we adjust the width and the height dynamically?

  • http://www.alltutz.com Amin

    Nice tip, just can we adjust the width and the height dynamically?

  • Qard

    Just use jquery to do that. The flash object retains the id of the replaced object, so you just need to do $(‘#flash’).attr(‘width’,100); to change the width to 100px. I might release an update before too long that can retain other stuff like classes also, but I’m not sure what I should include–I want to keep this nice and lightweight. :)

  • Qard

    Just use jquery to do that. The flash object retains the id of the replaced object, so you just need to do $(‘#flash’).attr(‘width’,100); to change the width to 100px. I might release an update before too long that can retain other stuff like classes also, but I’m not sure what I should include–I want to keep this nice and lightweight. :)

  • anna

    hey stephen,

    i am doing some tests with flash embedding, and unfortunately don’t know much about javascript.

    i copied the code above in my header, and am wondering how to call that script from the body of the html page.

    thanks so much!

    a.

  • anna

    hey stephen,

    i am doing some tests with flash embedding, and unfortunately don’t know much about javascript.

    i copied the code above in my header, and am wondering how to call that script from the body of the html page.

    thanks so much!

    a.

  • http://www.jamessmith.co.uk James

    Nice and lightweight, well done…

    Doesn’t seem to support allowfullscreen:true in IE7 however…?

  • http://www.jamessmith.co.uk James

    Nice and lightweight, well done…

    Doesn’t seem to support allowfullscreen:true in IE7 however…?

  • http://www.jamessmith.co.uk James

    not to worry, I saw how to add that parameter in, and now it works … you made it very easy. Thanks!

  • http://www.jamessmith.co.uk James

    not to worry, I saw how to add that parameter in, and now it works … you made it very easy. Thanks!

  • Henry

    I’d like to disable the (mouse right click) contextual menu. e.g. menu: false…
    Adding that argument didn’t seem to work.. Is there a way to make that work?

    Thanks!

  • Henry

    I’d like to disable the (mouse right click) contextual menu. e.g. menu: false…
    Adding that argument didn’t seem to work.. Is there a way to make that work?

    Thanks!

  • http://dtigraphics.net Jason Chandler

    This is a great plugin! We just upgraded to JQuery 1.4 and everything works perfectly. Before 1.4 we used another flash plugin that would print a “Flash required…” message if the incorrect version was detected. Is this something you could add to your plugin? It would make more sense to have jQuery print this out as opposed to haveing alternative text in the container.

    Again, very nice work!

    Thanks!

  • http://dtigraphics.net Jason Chandler

    This is a great plugin! We just upgraded to JQuery 1.4 and everything works perfectly. Before 1.4 we used another flash plugin that would print a “Flash required…” message if the incorrect version was detected. Is this something you could add to your plugin? It would make more sense to have jQuery print this out as opposed to haveing alternative text in the container.

    Again, very nice work!

    Thanks!

  • Qard

    Well, at the moment it allows for an expressinstall.swf file to be loaded if the detected version isn’t high enough, which I think is a little more elegant–you can upgrade right there rather than having to follow a trail of links through to adobe’s website.

    I currently have no plans to add anything like that, but I may consider something along those lines for when no flash is installed, since it currently just doesn’t replace the element if flash isn’t detected.

  • Qard

    Well, at the moment it allows for an expressinstall.swf file to be loaded if the detected version isn’t high enough, which I think is a little more elegant–you can upgrade right there rather than having to follow a trail of links through to adobe’s website.

    I currently have no plans to add anything like that, but I may consider something along those lines for when no flash is installed, since it currently just doesn’t replace the element if flash isn’t detected.

  • http://dtigraphics.net Jason Chandler

    I saw that it uses the express install component. I may give that a try. If flash isn’t installed/enabled will the alternative content still appear, ala swfobject style? We include a static image, or text in the parent div in case of no flash. So in that case I guess we really don’t need the alert message. BTW, this is by far the best method for embedding flash that I’ve seen. I’ve used the media plugin as well as the other flash jQ plugin and though they both worked, neither of them was as elegant. Yours just removes the parent container, instead of trying to add classes and other methods for hiding the alternative content; makes your plugin super-fast and lessens the FOUSC! Great work!

    Maybe I’ll try my hand at adding the alert into your plugin. Do you welcome code changes/fixes?

    Thanks again!

  • http://dtigraphics.net Jason Chandler

    I saw that it uses the express install component. I may give that a try. If flash isn’t installed/enabled will the alternative content still appear, ala swfobject style? We include a static image, or text in the parent div in case of no flash. So in that case I guess we really don’t need the alert message. BTW, this is by far the best method for embedding flash that I’ve seen. I’ve used the media plugin as well as the other flash jQ plugin and though they both worked, neither of them was as elegant. Yours just removes the parent container, instead of trying to add classes and other methods for hiding the alternative content; makes your plugin super-fast and lessens the FOUSC! Great work!

    Maybe I’ll try my hand at adding the alert into your plugin. Do you welcome code changes/fixes?

    Thanks again!

  • http://dtigraphics.net Jason Chandler

    Ok, so I just modified your 1.3.1 (has) function with a quick solution for what i’ve been asking for.

    After the closing ‘}’ (Line 121) I added this:

    //no flash installed add “Flash not installed…” message
    else {
    $(this).append(‘Please enable flash’);
    }
    return this;
    This of course can be a more useful message; link to download the player, etc but it works.

  • http://dtigraphics.net Jason Chandler

    Ok, so I just modified your 1.3.1 (has) function with a quick solution for what i’ve been asking for.

    After the closing ‘}’ (Line 121) I added this:

    //no flash installed add “Flash not installed…” message
    else {
    $(this).append(‘Please enable flash’);
    }
    return this;
    This of course can be a more useful message; link to download the player, etc but it works.

  • http://www.chenryhen.com/testing/chenry Henry

    Hi thanks for the great plugin! I hope this is the right place to ask, but I’m getting some quirky behavior that I can’t quite identify. I’m revamping my website and for the portfolio section, but using jquery to expand thumbnails into larger images. Jquery.flash looked the like the perfect thing for showing banner ads.

    If you look at the site on Safari, the banner ad (the first portfolio entry) plays very herky-jerky after it loads. You can copy the link from the thumbnail and view the swf directly to see what it should look like. In Firefox, the banner ad plays fine. Any clues? Thanks in advance.

  • http://www.chenryhen.com/testing/chenry Henry

    Hi thanks for the great plugin! I hope this is the right place to ask, but I’m getting some quirky behavior that I can’t quite identify. I’m revamping my website and for the portfolio section, but using jquery to expand thumbnails into larger images. Jquery.flash looked the like the perfect thing for showing banner ads.

    If you look at the site on Safari, the banner ad (the first portfolio entry) plays very herky-jerky after it loads. You can copy the link from the thumbnail and view the swf directly to see what it should look like. In Firefox, the banner ad plays fine. Any clues? Thanks in advance.

  • Qard

    I’m not sure why it’d do that. Unfortunately, I can’t test in Safari so I can’t really comment on it. Can you check the element inspector too see if there is any errors printed out in the console? I have an idea of what it might be, but I’m not positive–’class’ is a reserved keyword in Safari…I’m not sure how restrictive it is regarding that, but try replacing all instances of ‘class’ with ‘cls’ or whatever else you want and try it again.

  • Qard

    I’m not sure why it’d do that. Unfortunately, I can’t test in Safari so I can’t really comment on it. Can you check the element inspector too see if there is any errors printed out in the console? I have an idea of what it might be, but I’m not positive–’class’ is a reserved keyword in Safari…I’m not sure how restrictive it is regarding that, but try replacing all instances of ‘class’ with ‘cls’ or whatever else you want and try it again.

  • Qard

    On the note of no-flash; it’ll leave it as it is if no flash is found, so it’s easy to just put in a div with a no flash or no javascript text or image and have it only replace if both are available.

  • Qard

    On the note of no-flash; it’ll leave it as it is if no flash is found, so it’s easy to just put in a div with a no flash or no javascript text or image and have it only replace if both are available.

  • http://www.chenryhen.com/testing/chenry Henry

    oops the site url didn’t show up in my previous comment: http://www.chenryhen.com/testing/chenry

    No errors in the console. The strange thing is that when I checked it at work on Safari 4 for Tiger (I’m on Snow Leopard), it runs fine. I’ll have to try a few more computers. Oh and it also looks ok, albeit slowly, with the Web Inspector on. Maybe Flash is just quirky?

  • http://www.chenryhen.com/testing/chenry Henry

    oops the site url didn’t show up in my previous comment: http://www.chenryhen.com/testing/chenry

    No errors in the console. The strange thing is that when I checked it at work on Safari 4 for Tiger (I’m on Snow Leopard), it runs fine. I’ll have to try a few more computers. Oh and it also looks ok, albeit slowly, with the Web Inspector on. Maybe Flash is just quirky?

  • http://www.chenryhen.com/testing/chenry Henry

    It did seem just like a flash quirk for Safari. Thanks for the help though.

  • http://www.chenryhen.com/testing/chenry Henry

    It did seem just like a flash quirk for Safari. Thanks for the help though.

  • Zack

    Very useful, thanks!

  • Zack

    Very useful, thanks!

  • http://www.matsmikkel.net Mikkel

    This is awesome and worked perfectly! Thanks! I only have one question – how do I target a function inside the Flash file?

    Something like this:

    $(“#flashcontent”).flash(update(dest));

    Where “update” is the function inside the Flash. This doesn’t work, however. Any pointers?

  • http://www.matsmikkel.net Mikkel

    This is awesome and worked perfectly! Thanks! I only have one question – how do I target a function inside the Flash file?

    Something like this:

    $(“#flashcontent”).flash(update(dest));

    Where “update” is the function inside the Flash. This doesn’t work, however. Any pointers?

  • Qard

    I’m not sure exactly what it is you are trying to do, but normal Javascript/Flash interfaces should work as normal. Just find use it’s id or class, since they are retained unless specifically overridden, and do whatever it is you need to do.

  • Qard

    I’m not sure exactly what it is you are trying to do, but normal Javascript/Flash interfaces should work as normal. Just find use it’s id or class, since they are retained unless specifically overridden, and do whatever it is you need to do.

  • Art

    Please disregard and delete the last message. a) it had nothing to do with Mikkel’s post, and b) I just learned that Flash always ‘eats’ the click event

  • Art

    Please disregard and delete the last message. a) it had nothing to do with Mikkel’s post, and b) I just learned that Flash always ‘eats’ the click event

  • Zibeo

    Is it possible for this to monitor when the swf has completed and then start up a different swf file?

  • http://www.stephenbelanger.com Stephen Belanger

    No, you’d have to do that in the swf itself. Javascript doesn’t have any control of the playback of a swf file unless you explicitly expose that access in the swf itself. In which case, you might as well just use a container swf that loads other swfs as a sort of playlist.

  • Gmd_fayyaz

     if flash player is not installed in the pc then jquery slider run if flashplayer is installed then flash file run

    can somebody tell me this one solution i need this guidelines