By John Ryan & Eftar Miah

The use of flash media on the web has seen a steady increase in recent years ranging from the relatively simple advertisements and banners that we see on a daily basis, to the more complex, interactive implementations which power forms and in some cases drive entire websites (Example: Homebase). Today, this popularity is reflected in the growing number of media players, FLV players and codecs available for use.

Aside from household names such as Adobe, Apple and Microsoft amongst others, there are a number of highly customisable, feature-rich applications available at your fingertips -an example of which is the open source project, Flowplayer, currently at version 3.0.7.

Flowplayer 3.0.7 provides a whole host of additions when compared to its predecessor Flowplayer Classic, the most notable being the seamless integration of jQuery and an increased functionality available through the Object Oriented Javascript API.

The basics

To demonstrate, here's how to implement a very basic - yet fully functional - Flowplayer installation in four easy steps:

And there we have it - simple! Still, it is worth pointing out to the purists that the style attribute defined in step 3 can be outsourced to an external stylesheet to reduce cluttering up your HTML and improve maintainability.

Configuration

As with most things in life, give us options and we'll want to explore them. Flowplayer provides numerous options to configure the player's appearance:

In the above example we have included an  tag containing a splash image which displays by default. This method does not activate the Flowplayer until the user clicks on the image - hence page loads are much quicker. Another benefit is that without necessarily realising, we have just implemented a basic fault-tolerant system whereby if a user has Javascript disabled, they still view the page as it is supposed to be viewed albeit with reduced functionality.

Multiple Installations

As mentioned earlier, Flowplayer seamlessly integrates with jQuery and is also Object Oriented - both features which lend themselves to the idea that we can in fact include multiple instances within any page.

Here we declare N player containers

And using jQuery create a new Flowplayer object for each link containing relevant FLV files

$(".videos").flowplayer("/other_files/flashplayer/flowplayer.swf");

And once again, notice our use of splash images - we have a site with a reduced load time and that also displays correctly to non-Javascript users.

The Flowplayer Javascript API provides more than just a flat list of functions - it is in fact object oriented so we have at our disposal a set of properties and methods, which in turn can themselves return objects.

Once flowplayer.js has been installed, these properties and methods are available for use and we can create and edit instances of flowplayer() (and it's shortcut $f).

In the following example we create an instance of the flowplayer object, install it to the DOM element with the id of "player" and, for the first time set it's attributes (clip and canvas) using OO methodologies.

 $f("player", "path/to/flowplayer.swf", {
 clip: {
 url: 'path/to/video.flv',
 autoPlay: false
 },
 // canvas coloring and custom gradient setting
 canvas: {
 backgroundColor:'#254558',
 backgroundGradient: [0.1, 0]
 }
 });

Each of the above examples is intended to give an insight into the flexibility of Flowplayer and its associated API. Armed with this knowledge, you should now be ready to deploy your own Flowplayer installation across your website.

For more in-depth documentation and an extensive demo list, visit the Flowplayer website.