This is a message.

Writing JavaScript plugins

Characteristics of a JavaScript plugin

  • Works outside of the player’s Flash component doing something useful for the users that watch videos.

  • Interacts with the Flowplayer API and is heavily based on events.

  • Cannot render itself inside of Flowplayer, but it can communicate with Flash plugins that reside inside the player.

  • Can extend the Player object by using the $f.addPlugin() method. After that you can use your plugin in the following manner $f().yourPlugin(...). However, this is not required and you can just use JavaScript code that works with the Flowplayer API and instantiates it the way you like.

It is possible to place HTML elements on top of the Flash component using the wmode parameter, but this is not recommended because it leads to poor performance and browser incompatibility issues.

The way you implement your plugin relies on your own creativity. Of course we recommend that you follow good coding practices such as these and you make use of existing JavaScript libraries such as jQuery to achieve your goal.

Plugin example: captions

Setup and configuration

// set up the player normally using a container with the id "player"
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
// our example plugin uses the content plugin to display captions
plugins: {
content: {
bottom: 25,
backgroundColor: 'transparent',
backgroundGradient: 'none',
borderWidth: 0,
width: '80%',
url: 'flowplayer.content-3.2.9.swf',
html: 'This works as a placeholder for captions',
style: {body: {fontSize:16}, a: {color:'#f9ff00'}}
}
}
// our plugin is enabled here. the captions are given in the argument
}).captions({
// playback duration : 'caption'
3000: 'Our first caption',
6000: 'Our next caption contains <b>bolded text</b>',
9000: '<img src="/media/img/global/info.png" align="left"/> ' +
'Images are also supported',
13000: 'You can also have links: <a href="javascript:clickMe()">try me!</a>',
18000: 'This was the last caption. Enjoy!'
});

JavaScript

Implementation

Here is how this plugin was done. We used the $f.addPlugin method to create this plugin. The actual plugin is a JavaScript function that takes captions as its first argument.

$f.addPlugin("captions", function(captions) {
 
// first we generate the cuepoints Array from captions
var cuepoints = [];
 
for (time in captions) {
cuepoints.push(parseInt(time));
}
 
// get handle to the content plugin. this plugin is required
var content = this.getPlugin("content");
 
// plugin was found
if (content) {
 
// register cuepoints and its handler function
this.onCuepoint(cuepoints, function(clip, time) {
 
// this function simply updates the content with the given captions
content.setHtml(captions[time]);
});
}
 
// return the Player instance for fellow developers
return this;
 
});

JavaScript

A standalone version of this JavaScript file can be found here. The user can change the positioning, look and feel of the captions simply by configuring the content plugin. This plugin could easily be extended with support for animations and custom positioning upon each cuepoint; however, that is beyond the scope of this document.

Creating plugins

The recommended way to extend Flowplayer with JavaScript is to use the $f.addPlugin method. It works in the following manner:

$f.addPlugin("myPlugin", function(arg0 ... argN) {
// the "this" variable is a pointer to the current Player instance
var player = this;
 
// the player instance should be returned to enable plugin and
// method chaining
return this;
});

JavaScript

After that you can use your plugin in the following way:

// enable myPlugin for a Player that is contained inside of myDiv
$f("myDiv").myPlugin();
 
// plugins and methods can be chained. the load() method is a normal
// API method
$f("myDiv").myPlugin().myOtherPlugin().load();

JavaScript

Inside your plugin you typically add event handlers that listen to the player and clip events

$f.addPlugin("myPlugin", function(arg0 ... argN) {
// myPlugin does something when the player is loaded
this.onLoad(function() {
// do something important
});
 
// remeber to return the player instance
return this;
});

JavaScript

Each plugin can have its own set of event handlers so that different plugins can work independently of each other. As you can see, JavaScript plugins are relatively easy to do - so we recommend that you study the Flowplayer API and start experimenting. You can also study the source code of our playlist plugin to see how it is implemented.