This is a message.

flowplayer()

When you have included flowplayer.js in your page, you have the flowplayer() function available. It is the starting point for all Flowplayer activities and it is used to both create and access Flowplayer instances. A handy shorthand is $f(), which is a reference to the flowplayer() function and which can be used as a synonym.

In this section:

Player creation

MethodReturnsDescription

flowplayer ( containerId, params, [config] )

Player

containerId is the id of the element inside which to install a Flowplayer instance. params can be given as a string or as an object. A plain string represents a relative or absolute URL to the Flowplayer Flash component to be loaded. If it is given as an object, it is a collection of standard Flash parameters such as background color that are passed to the Flash object before Flowplayer is fully loaded. In general you won't need to tweak these and a path to the Flowplayer Flash component is enough. config is an optional Flowplayer configuration. If it is given as a string it represents a relative or absolute path to the playable video file. If given as an object, it can contain information about the clips to load, controls to load and various player settings. You can provide such a configuration for example as a json object. If this argument is omitted then the path to the video file is by default taken from the container's href attribute. If there is no href attribute in the container, then you can later set the clip to play. Example: $f("myDiv", "flowplayer.swf", "my-movie.flv"); This method does not require the container element to be loaded. If the player is already installed on the container then this method will re-instal it, giving you a chance to specify a completely different configuration. As a last step, the player's load() method is called.

flowplayer( domElement, params, [config] )

Player

Installs a Flowplayer instance on the DOM element given as the first argument. Example: 

// install flowplayer when the element is clicked
document.getElementById("myDiv").onclick = function() {
    $f(this, "flowplayer.swf", "my-movie.flv");
};

JavaScript

flowplayer ( selector, params, [config] )

Iterator

Installs a Flowplayer instance on each of the elements selected by the selector argument. This selector has the following syntax: element.className. For example: "a.flowplayer" selects all a tags that have "flowplayer" as their class name. Example: $f("a.flowplayer", "flowplayer.swf"); When making this call you must make sure that the container elements have been fully loaded on the page. You can find more information about "dom loading" here. If you give a configuration object in the third argument, it is copied for each player instance. This is a good way to provide a common configuration for all players. If you are using the jQuery JavaScript library we highly recommend our jQuery support methods.

Player retrieval

MethodReturnsDescription

$f()

Player

Returns the first loaded Player instance. The order of loading can be different from the order of the container elements on the page. If none is loaded then the first installed Player instance is returned. From the retrieval methods this is the one most commonly used.

$f(index)

Player

Returns the Player instance specified by the zero-based index argument. The index of a Player is the order in which it was created.

$f("containerId")

Player

Returns a Player instance that is installed inside container element "containerId". For example if the container is <div id="example"><div>, then you supply "example" as the argument.

$f(domElement)

Player

Returns a Player instance that is installed inside the given DOM element.

$f("*")

Iterator

Returns all Player instances on a page.

jQuery support

See also jQuery in the introduction

MethodReturnsDescription

$("jQuery").flowplayer( params, [config] )

jQuery

Installs Flowplayer instances inside the elements selected by the jQuery selector (a string). The arguments are the same as in "normal" flowplayer creation described above, except that the first argument is not needed because it is provided by the jQuery selector. This call returns the jQuery object so you can cascade your calls with other jQuery plugins. Example:

/ Select all links with .flv suffix and make them playable with
 * flowplayer
 /
$("a[href*=.flv]").flowplayer(
    "flowplayer-3.2.16.swf"
);

JavaScript

$("jQuery").flowplayer()

Iterator

Returns all Player instances that are contained inside the elements selected by the jQuery selector. Example:

/ Return players within div's that are inside "div#myPlayers" /
$("div#myPlayers div").flowplayer().each(function() {
  // 'this' refers to the current Player instance
  alert(this.getVersion());
});

JavaScript
Note that the number of players is always less than or equal to the number of elements selected by the "jQuery" selector.

$("jQuery").flowplayer( index )

Player

Similar to the previous method but returns only a single Player instance from the elements selected by the "jQuery" selector, specified by the index parameter. Example:

/ Load first player within div#myPlayers /
$("div#myPlayers div").flowplayer(0).load();

JavaScript

JavaScript plugins

Do not confuse JavaScript plugins with swf plugins. JavaScript plugins are functions you attach to flowplayer and that you can call as if they were flowplayer methods. swf plugins are Flash componetnts such as a a control bar.

MethodReturnsDescription

$f.addPlugin( name, plugin )

flowplayer

Adds a JavaScript plugin to all Player instances. Let''s say we want to add a plugin called fly that expects three arguments. You can do this as follows: 

$f.addPlugin("fly", function(top, left, speed) {
    // 'this' refers to the current Player instance
    var version = this.getVersion();
 
    // return the Player object for method chaining
    return this;
});

JavaScript
After this we can use our plugin in the following manner: $f("myPlayer").fly(10, 30, 500).load(); Internally this method attaches your plugin to the Player''s prototype object. Take care that your plugin''s name does not conflict with already loaded plugins or with Player methods, or you cannot access your plugin. You can read more about writing JavaScript plugins here.

Iterator

Some of the flowplayer methods return an Iterator object whose purpose is to iterate over all matched player instances. It has one method called each that takes a function argument which is called on each iteration. The function's 'this' variable refers to the loop's current Player instance. Here is an example. 

$f("*").each(function() {
    // 'this' refers to the loop's current Player instance
    this.onLoad(function() {
        // declare an onLoad listener for this Player instance
        ...
    });
});

JavaScript

Although the syntax might first scare you, the situation is actually not so scary. This kind of looping leads to cleaner code and avoids having to declare additional looping variables (such as "i" in a for-loop). As for the function to call on each iteration, it is provided in the example as a function literal, which avoids having to declare a named function and clobber the namespace. See also our approach to Object Orientation.

Returning false from within the each function breaks the loop. This is like using a 'break' statement in a normal loop.

In addition to the each method, the iterator has a length property that returns the number of instances in the Iterator.

Static methods

Flowplayer offers two general purpose functions for your convenience, intended mainly for plugin developers in case the jQuery or similar library is not used. These are:

MethodDescription

$f.each

Iterate through the properties of an object or through the elements of an array in a similar manner as Iterator does.

$f.extend(target, source)

Extend or overwrite the target object with the properties of the source object. This method is useful when your plugin has default configuration settings and you want to override those with user defined properties. Take a look at embed for some examples.