jQuery SWFObject Plugin

The unique functionality of SWFObject available through jQuery.

What is the jQuery SWFObject plugin?

The jQuery SWFObject plugin is an addon for jQuery that offers SWFObject's unique functionality of embedding Flash content using the internal jQuery API.

What is SWFObject?

SWFObject is an easy-to-use and standards-friendly method to embed Flash content reliably within all major browsers. You can learn more about SWFObject here.

What is jQuery?

jQuery is a small but power-packed bundle of javascript functions that make writing javascript quick and simple. Selecting elements on your page is like using CSS, learning and using functions requires minimal fuss, and the learning curve is sometimes described as "zero". You can learn more about jQuery here.

How do I use jQuery SWFObject plugin?

It's easy. Tell the jQuery SWFObject plugin what flash document you want to use and where you want to put it. It works using jQuery selectors, like this:

<script src="jquery.1-2-6.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.swfobject.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { // #flashTest1 is the selector $('#flashTest1').flash({ // test.swf is the flash document swf: 'test.swf' }); }); </script> <div id="flashTest1"></div>

When we're done, that result should look something like this:

If you like, you can download this example here.

You can also use flashvars with the jQuery SWFObject plugin. It works using like this:

<script src="jquery.1-2-6.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.swfobject.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { // #flashTest2 is the selector $('#flashTest2').flash({ // test_flashvars.swf is the flash document swf: 'test_flashvars.swf', // these arguments will be passed into the flash document flashvars: { name1: 'jQuery', name2: 'SWFObject', name3: 'Plugin' } }); }); </script> <div id="flashTest2"></div>

When we're done, that result should look something like this:

If you like, you can download this example here.

Want to learn more about how it works?

Please visit our features section to learn how to use this plugin, or visit our examples section to see these and more examples of this plugin in action.

Ready to try the jQuery SWFObject plugin?

Please visit our downloads section.

Downloads

The jQuery SWFObject plugin is an addon for jQuery that offers SWFObject's unique functionality of embedding Flash content using the internal jQuery API.

All-in-One Package
Zip (2.69 MB)
jQuery SWFObject Plugin v1.0.3
Minified Js (2.82 KB)
Uncompressed Js (7.28 KB)
Homepage
jQuery v1.2.6
Minified Js (54.2 KB)
Uncompressed Js (98.1 KB)
Homepage

Features

$.flashPlayerVersion
An array containing the major, minor, and build numbers of the user's Flash plugin.
return $.flashPlayerVersion // returns [10, 0, 12]
$.flashExpressInstaller
An string containing the path and filename of the express installer.
$.flashExpressInstaller = 'myFlashPath/expressInstall.swf'; // Will use this one
$.hasFlashPlayer
A boolean value of whether the user has installed the Flash plugin.
return $.hasFlashPlayer; // returns true
$.hasFlashPlayerVersion()
A function which returns a boolean value of whether the user has installed the Flash plugin of at least the specified version.
return $.hasFlashPlayerVersion(9.1); // returns true if Flash 9.1+ is detected;
$.flash()
A function which returns a standards-friendly jQuery'd flash object.
<script type="text/javascript"> var useLater = $.flash({ swf: 'myFlash.swf', height: 400, width: 600 }); // saves the flash object for later $(document).ready(function () { $.('#putFlashHere').html(userLater); }); </script>
$(selector).flash()
A function which inserts a standards-friendly jQuery'd flash object into the selector.
$.('#putFlashHere').flash({ swf: 'myFlash.swf', height: 400, width: 600 });

$(selector).flash() Features

swf
Sets the path and filename of the Flash movie.
$.('#putFlashHere').flash({ swf: 'myFlashMovie.swf' // Required to execute });
height
Sets the height of the Flash movie.
$.('#putFlashHere').flash({ swf: 'flashStatus.swf', height: 400 // Default is 180 });
width
Sets the width of the Flash movie.
$.('#putFlashHere').flash({ swf: 'flashStatus.swf', height: 400, widht: 600 // Default is 320 });
hasVersion
Temporarily assigns the version of the Flash plugin required to display the Flash movie.
$.('#putFlashHere').flash({ swf: 'flash10.swf', height: 400, width: 600, hasVersion: 10 // optional and temporary });
expressInstaller
Temporarily assigns the expressInstaller to the specified path and filename.
$.('#putFlashHere').flash({ swf: 'myFlash.swf', height: 400, width: 600, hasVersion: 10, // optional and temporary expressInstaller: 'justThisOnceExpressInstaller.swf' // optional and temporary });
flashvars
A string or an object that defines the data or variables to be passed into the Flash movie.
$.('#putFlashHere').flash({ swf: 'flashStatus.swf', height: 400, width: 600, flashvars: { person: 'Jonathan', feels: 'good', about: 'Lara' } });
params
An object that defines the paramaters to be passed into the Flash movie. This can include the Flashvars.
$.('#putFlashHere').flash({ swf: 'flashStatus.swf', height: 400, width: 600, params: { play: true, loop: true, flashvars: { battleMode: true, computer: true, players: 2 } } });

Examples

It's easy. Tell the jQuery SWFObject plugin what flash document you want to use and where you want to put it. It works using jQuery selectors, like this:

<script src="jquery.1-2-6.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.swfobject.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { // #flash-example-1 is the selector $('#flash-example-1').flash({ // test.swf is the flash document swf: 'test.swf' }); }); </script> <div id="flash-example-1"></div>

When we're done, that result should look something like this:

If you like, you can download this example here.

You can also use flashvars with the jQuery SWFObject plugin. It works using like this:

<script src="jquery.1-2-6.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.swfobject.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function () { // #flash-example-2 is the selector $('#flash-example-2').flash({ // test_flashvars.swf is the flash document swf: 'test_flashvars.swf', // these arguments will be passed into the flash document flashvars: { name1: 'jQuery', name2: 'SWFObject', name3: 'Plugin' } }); }); </script> <div id="flash-example-2"></div>

When we're done, that result should look something like this:

If you like, you can download this example here.

In this example I'm using a flash animation made by my friend Celerant. You can attach flash as an inline onClick event on a button.

<script src="jquery.1-2-6.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.swfobject.js" type="text/javascript" charset="utf-8"></script> <div style="text-align: center;"> <div id="flash-example-3" style="padding: 10px;"></div> <input onClick="$('#flash-example-3').flash({swf:'sine.swf',height:500,width:600});" value="Add Flash"> <input onClick="$('#flash-example-3').html('');" value="Remove Flash"> </div>
...
|

If you like, you can download this example here.

You can also preload the SWFObject injection before ready for even-better performance like this:

<script src="jquery.1-2-6.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.swfobject.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> myFlash = $.flash({ swf: 'test_flashvars.swf', flashvars: { name1: 'jQuery', name2: 'SWFObject', name3: 'Plugin' } }); $(document).ready(function () { $('#flash-example-4').html(myFlash); }); </script> <div id="flash-example-4"></div>

If you like, you can download this example here.

License

The jQuery SWFObject plugin uses a dual MIT/GPL license.

MIT License

Copyright (c) 2008 Jonathan Neal

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GPL License

Copyright (C) 2008 Jonathan Neal

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.

SWFObject uses a MIT license.

MIT License

Copyright (c) 2008 Geoff Stearns, Michael Williams, and Bobby van der Sluis

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Known Issues

Support

Feel free to write me your questions, concerns, encouragement, or any other feedback related to the jQuery SWFObject Plugin.

Your Email:

Subject:

Message: