Embedding Flash with flashembed.js

flashembed is a javascript tool that you can use to embed Flash objects to you website. There are other tools for embedding flash objects but none of them offers the same flexibility and ease of use as this one.

download version 0.31

A trivial example

<div id="clock" style="width:100px;float:right"></div>

<script> flashembed("clock", "clock.swf"); </script>

Benefits

flashembed("clock", "clock.swf", {digital:true});

var api = flashembed("containerId", "foo.swf");

$("#clock").flashembed("clock.swf");

Full syntax

flashembed(element, flash_parameters, [swf_configuration]);

1.st argument: element

is either a DOM element or a String indicating some HTML element's id

2.nd argument: flash_parameters

is a relative or absolute path to the swf file. This argument can also be given as JSON Object where path to swf file is given in src property. Here is a list of other properties that you can set.

• Custom parameters
• Standard Flash parameters

3.rd argument: swf_configuration

this is an optional argument that configures your Flash object. All parameters in this object are given as variables (or flashvars) to your Flash object. This can be as complex JSON object if possible.

jQuery support

jQuery is mainly supported because of it's highly effective selector language. All you have to do is to include jquery to the page and your ready to use following syntax

$("jQuery selector").flashembed(flash_ parameters, [swf_configuration]);

jQuery selector

Selects one or more elements to be replaced with Flash object. Uses jQuery selector syntax which is quite similar to CSS but more advanced.

If you have many Flash objects on your site (such as sifr objects) jQuery is an ideal tool for "flash-enabling" them. It has native query language for finding elements and this plugin can replace those elements with Flash. If you are a JavaScript developer and you are not familiar with it already - study it now!

2nd and 3rd arguments

Thse follow the same practices as in full syntax

Static methods

Flashembed exposes two static methods for your own free use

// get current flash version. returns an array [major, fix]
flashembed.getVersion();

// check if version [9, 0] is supported
flashembed.isSupported([9, 0]);

These functions work only after Flash elements have been loaded into the page - for example in window's onLoad event.

Examples

JSON Configuration

As we are on Flowplayer website let's show how it can be configured.

flashembed("player", "FlowPlayerDark.swf", {config: {  
	autoPlay: false,
	playList: [{ url: 'video/spammer.flv', overlayId: 'play' }],
	initialScale: 'scale', 
	useNativeFullScreen: true
}});

Flowplayer object is configured with second argument. It requires a complex JSON object in "config" variable. This is easy with flashembed.js.

Alternate content

Here we need to have at least version 9.0.115. If such a version was not found show default error message.

flashembed("example", {
  src: 'example.swf', 
  version: [9,115]
});

Our error message is even usefull! Here is a real example of one. Note that you should ignore the minor number in the versioning because that is always zero according to Flash release history.

If you need to have your own alternate content - simply place this content inside the element that is supposed to be replaced by Flash. Here's an example:

<div id="example">
	Your browser does not support Flash. Please download it from Adobe
</div>

Or you can specify a custom method when flash is not supported.

flashembed("example", {
  src: 'example.swf',
  version: [9,115],
  
  /* 
    this- variable points to the supplied parameters 
    and user's version is given as argument
  */
  onFail: function(version)  {
     return "version " +this.version+ " is required. you have " +version; 
  }
});

Lazy loading

Lazy loading was introduced into flashembed in version 0.26. It is a feature where Flash object was loaded only after the containing element was clicked or mouseovered. Since 0.29 this feature was dropped because this kind of functionality should be coded outside the tool if you want to make more readable code. This is how lazy loading could be achieved with jQuery.

// lazy loading with jQuery. so easy!
$("div#example").click(function() {
	flashembed(this, 'example.swf');	
});

Express install

The Express Install feature is used to install a required Flash player plug-in right there in the same page. In the following example we need to have at least version 9.1.23. If such a version was not found use express install to upgrade Flash on the fly. You need to have expressinstall.swf available for download.

flashembed("example", {
  src:'example.swf', 
  version:[9,115],
  expressInstall:'expressinstall.swf'
});

API Access

This quick example shows you an example usage of getting handle to the Flash objects API of such is provided.

<!-- setup container for your flash object -->
<div id="example"></div>

<script> 
   // load Flash object, API is automatically returned for you (since 0.27)
   var api = flashembed("example", {src:'example.swf'});
</script>

Now your API is ready to be called:

<button onClick="api.doSomething()">API action</button>

Note: this feature is not supported upon lazy loading or when selecting nodes with jQuery.

Browser support

• Firefox 1.5/2.0+
• Internet Explorer 5.5/6.0/7.0+
• Safari 2.0+
• Opera 9.0+

Download version 0.31

Release notes from each release.

flashembed-0.31.js (jslint compatible source code, 7.7 kb)

flashembed-0.31.min.js (minified version, 5.4 kb)

flashembed-0.31.pack.js (packed version, 4.2 kb)

Contact

Flashembed is a very new plugin and it has not been tested on every combination of browsers and operating systems. If you encounter problems please drop a bug report to support@flowplayer.org. An URL pointing to the problematic page is most useful.