• Flowplayer
• jQuery Tools
• Login
• Logout

Flashembed

Flashembed is a modern way of embedding Flash. Simple, elegant and robust.

standalone demo

Simple

The above example was performed with this JavaScript call: flashembed(this, "flash_promo.swf"); If you don't need anything special, it's easy to get Flash up and running on your site.

JSON configuration

Flash can be configured with JSON. Compared to XML this is simpler and much more flexible. In fact this was the main reason for developing this tool.

jQuery support

flashembed is designed with scripters in mind. A polished programming API together with support for jQuery selectors has been built-in. As opposed to other jQuery Tools flashembed does not requirejQuery.

1.09 kb!

This crazy size is one quarter of the competitors. The clean source code passes Douglas Crockford's JavaScript Verifier and it assigns only one global variable: flashembed.

Note: Flash is becoming an old school technology. The iPad and other products are removing the support for Flash. JavaScript will rule. Having said that, Flash technology still has an important role to play on the Internet; especially when you want to play videos.

Flashembed and jQuery Tools

Distinct from other jQuery Tools, this tool does not depend on jQuery. You can use it as a standalone tool for embedding Flash. The jQuery syntax is supported but not required. For this reason, this tool lacks some of the features available in other tools such as callback functions and the ability to write plugins.

Demos

We have seen that the best way to learn is through demos. Each of the following examples contain both documented source code and a standalone version of the demo that you can use to get flashembed working on your site:

• Basics of Flash embedding
• Flashembed and jQuery
• Loading flash on a mouse click
• Placing HTML on top of a flash object
• Handling old flash versions
• Flashembed and Flowplayer

Usage

flashembed is a function and it accepts the following arguments:

  flashembed(container, embedOptions, flashConfiguration);

1. container identifies where the Flash object is placed on the document.
2. embedOptions specifies the path to the Flash object and optionally how it is embedded.
3. flashConfiguration is an optional argument and it configures the actual Flash object.

1st argument: container

This is either a DOM element or a string representing some element's id attribute. The Flash object is placed inside this container. It's important to note that you don't have to worry about where you place your container on the page or where you place your flashembed call. This tool takes care of finding the container you specify.

As of version 1.2 you can prefix the ID name with # character. For example, #mydiv simulating the syntax of jQuery selectors.

2nd argument: configuration

The second argument specifies the path to the Flash object and optionally how it is embedded. This is either a simple string representing the path to the embedded flash object or an object that has many different configuration options including the path to the Flash object.

In case you specify the second argument as an object, you can find a list of available options below. The options before the grey line are specific to flashembed and below that you can see the most popular Flash parameters that are understood by the Flash technology itself.

3rd argument: flashvars

The third argument configures the Flash object you have defined in the second argument. This is optional because not all Flash objects are configurable. This is specified as a JavaScript object as follows:

  // supply configuration (flashvars) for the Flash object
  flashembed("flash", "my_object.swf", {
 
  my_param: 'foobar',
  my_other_param: 'Hello world'
 
  });

Flashembed has the unique feature of configuring your Flash objects with JSON. This gives you the ability to supply complex configurations directly upon embedding. JSON is a JavaScript-based syntax and is much more flexible and simpler than XML which has historically been used for Flash configuration. Here is an example of a JSON-based configuration:

  flashembed("flash", "my_object.swf", {
 
  /*
  a JSON-based configuration variable.
  enter the modern world of Flash configuration!
  */
  my_param: {
  my_array: [1, 2, 3], ,
  my_other_param: 'Hello world',
  nested_object: {
  another_array: ["foo", "bar", 30.3]
  }
  }
 
  });

If you are developing a Flash object and want to configure it with JSON, you can download JSON parsers for Flash from as3corelib.

A few embedding examples

  // install the Flash object inside an element whose id is "flash"
  flashembed("flash", "myfolder/my_flash_object.swf");
 
  // install the Flash inside a certain DOM element
  var domElement = getElementById("flash");
  flashembed(domElement, "my_flash_object.swf");
 
  // tweak the embedding options
  flashembed("flash", {
  src: 'my_object.swf',
  allowfullscreen: false
  });

jQuery support

Flashembed has support for jQuery. This means that it can work as both a standalone script or as a jQuery plugin. You can use jQuery selectors to select elements from the page and place Flash objects inside them. Here is the generic jQuery syntax for flashembed:

  $("jquery_selector").flashembed(configuration, flashvars);

As you can see, there are a maximum of 2 arguments here and flashvars is optional as before. You can find more information about jQuery selectors here. Here is an example that will search all div elements with the class name "flash" and place a Flash object inside them:

  $("div.flash").flashembed("my_object.swf");

Simple and powerful. Once you have installed the Flash objects you can access the flashembed API with jQuery's data method as follows:

  // get access to the flashembed programming API
  var api = $("div.flash:eq(0)").data("flashembed");

Flashembed API

Here you can see the two different ways of accessing the Flashembed API:

  // the API is returned by the flashembed call
  var api = flashembed("flash", "myfolder/my_flash_object.swf");
 
  // inside the onFail function, the "this" variable is a pointer to the API
  flashembed("container", {src: 'my_object.swf', version: [9, 115], onFail: function() {
 
  // use API methods here
  var conf = this.getConf();
 
  });

This API has thr following methods available for your use:

Static methods

Flashembed exposes few static methods. Static methods don't need any instances and can be called directly from the flashembed namespace. For example:

  // get the embedding code for the supplied options and configuration
  flashembed.getHTML({src: 'my_object.swf', w3c: true}, {
  param1: 'foobar',
  param2: 'baz'
  });

Generated HTML

This section describes what happens "behind the scenes" and what kind of HTML is generated for the client when the Flash object is embedded. This is quite technical and if you are not interested in W3C standards feel free to skip this section.

When studying what HTML will be produced we are using the following flashembed call:

  flashembed("clock", "/media/swf/global/clock.swf");

Which will generate a Flash-based clock as seen below:

This will generate the following HTML for Mozilla, Safari, Opera and Chrome:

  <object data="/media/swf/global/clock.swf"
          type="application/x-shockwave-flash" width="100%" height="100%">
 
    <!-- these parameters are generated by default -->
    <param name="allowfullscreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="quality" value="high">
  </object>

This is the standards-based syntax as specified in this W3C specification. It's no surprise that Internet Explorer does not support this syntax so this browser is supplied with the following HTML instead.

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
          height="100%" width="100%">
    <param value="/media/swf/global/clock.swf" name="movie"/>
    <param value="true" name="allowfullscreen"/>
    <param value="always" name="allowscriptaccess"/>
    <param value="high" name="quality"/>
  </object>

This works only in IE and not in other browers.

W3C configuration option

Flashembed comes with a W3C option that will generate a standards-based syntax that works on all browsers. This syntax is specified in this A List Apart document and you can generate similar code like this:

  // enable W3C object code syntax
  flashembed("clock", {src: "/media/swf/global/clock.swf", w3c: true});

The generated HTML looks like this:

  <object data="/media/swf/global/clock.swf"
          type="application/x-shockwave-flash" height="100%" width="100%">
    <param value="/media/swf/global/clock.swf" name="movie"/>
    <param value="true" name="allowfullscreen"/>
    <param value="always" name="allowscriptaccess"/>
    <param value="high" name="quality"/>
  </object>

This would appear to be a perfect solution, but there is one drawback. While every other browser is getting it right, IE/Windows is not streaming - it waits for the entire movie to download before playing it. This is fine for small movies, but for anything serious the lack of streaming is unacceptable. This is why this flag is only suitable for standards fanatics that are using small SWF files. The A List Apart document describes a workaround for this called "Flash satay" and you can read about it in that document.

• report a bug »
• 
• What's new in v1.2.6 »