Flashembed is a modern way of embedding Flash. Simple, elegant and robust.
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.
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.
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.
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
flashembed is a function and it accepts the following arguments:
- container identifies where the Flash object is placed on the document.
- embedOptions specifies the path to the Flash object and optionally how it is embedded.
- 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.
|src||The path to the Flash object to be embedded. This is the only required option.|
Specifies the minimum version required for the plugin. Adobe releases Flash versions in the following format: [major, 0, fix] where the minor number is always zero. For that reason, this tool ignores the second version number and the version is given in this format: [major, fix].
So if you want to provide alternate content for versions that are below [9,0,45], you must supply [9,45] here.
This is an absolute or relative path to a expressinstall.swf file.
Express Install technology allows you to seamlessly upgrade visitors to your website to the latest player using a Flash-based experience. Express Install allows you to design an in-context upgrade experience for your content so users never have to leave your site. It also lets you gracefully handle user cancellation and avoid system restarts.
If this is specified and the user's Flash version is greater than [6, 65], then this plugin attempts to install Flash on-the-fly. You can learn more with this demo.
|w3c||false||If set to true, the tool switches to standards-based object syntax when generating HTML. You can find more information about this technical subject here.|
|cachebusting||false||By enabling this property flashembed will force the SWF file to be loaded from the server and skip the browser's cache no matter what the expiry headers are. This is achieved by appending a random query string variable to the request URL.|
|id||random string||id attribute for the generated OBJECT tag. If this is not explicitly given then a random string is used because in certain browser/os combinations the ID is required for solid functionality.|
|bgcolor||The hexadecimal RGB value in the format of #RRGGBB. This specifies the background color of the movie.|
|width||100%||It is recommended that you not change this and instead specify the width and height for the container element using CSS.|
|height||100%||It is recommended that you not change this and instead specify the width and height for the container element using CSS.|
|wmode||window||Set this to "opaque" if you want to place normal HTML elements on top of the Flash object, for example, a dropdown menu. You can find a demo about this here.|
|allowfullscreen||true||Allows your Flash object to enter Fullscreen mode. If you don't need this feature or are concerned about security, set this to false.|
|quality||high||Possible values are low, high, autolow, autohigh, and best. low favors playback speed over appearance and best provides the best display quality and does not consider playback speed. It is recommended that you not change this. The default value high is the best compromise between quality and playback speed.|
3rd argument: flashvars
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
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:
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:
Simple and powerful. Once you have installed the Flash objects you can access the flashembed API with jQuery's data method as follows:
Here you can see the two different ways of accessing the Flashembed API:
This API has thr following methods available for your use:
||Returns the optional configuration for the Flash object (3rd argument).|
||Returns the embedding options for the Flash component (2nd argument).|
||Returns the container for the Flash object|
Flashembed exposes few static methods. Static methods don't need any instances and can be called directly from the flashembed namespace. For example:
||Returns the Flash version of the user. Returns the array [major, fix]. For example: [9,45]. If Flash is not installed at all a [0, 0] is returned.|
||Whether the given version is supported. Example: flashembed.isSupported([9, 0]);|
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:
Which will generate a Flash-based clock as seen below:
This will generate the following HTML for Mozilla, Safari, Opera and Chrome:
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.
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:
The generated HTML looks like this:
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.