This is a message.

Basics

Search engine friendly content

AJAX demo

Here we have a playlist consisting of four clips. Every time a clip starts we update this area with a data that is fetched from the server.

Click on the player to see it in action.


Here is a demonstration of the power of events. Every time a clip starts in the playlist we update the info area besides the video screen.

Events are an powerful way of extending the player functionaly to the extremes we are not even aware of. This technology allows you to execute JavaScript functions when certain key events occur in the player. For example, you can trigger a function every time the user toggles fullscreen mode, or when playback finishes. In this area Flowplayer really shines.

Event types

There are three types of events

  1. player events, which occur in the player as a whole

  2. clip events, which are specific to a particular clip

  3. cuepoints, these events are defined by you. They allow you to execute code at predefined times during playback

Configuring events

Event actions are specified in the Flowplayer configuration just like any other property - but the values of such properties are JavaScript functions. In previous demo we used onStart event as follows.

flowplayer("player", "flowplayer-3.2.18.swf", {
clip: {
// load data from the server
onStart: function(clip) {
$("#info").load("get-data.php?index=" + clip.index);
}
}
});

JavaScript

It's important to notice that you can do anything you possibly can do with JavaScript inside event functions. You have full access to surrounding document and its elements or you can use your favourite JavaScript library. On our site we use jQuery because we like it.

Inside events

The internal properties and methods exposed by Flowplayer that you can access inside your event handlers are described below.

The context

In JavaScript a context is an object within which you are operating. In essence the context works through the variable this. In Flowplayer events you can use the variable this to get hold of the current Player instance. This is extremely powerful. For example:

clip : {
onStart: function(clip) {
// this-variable points to current flowplayer instance
var version = this.getVersion();
 
// as an example, we will get handle to the container element
// as DOM object
var wrapper = this.getParent();
}
}

JavaScript

Arguments

All clip event actions receive the clip's corresponding clip object through their first argument. This object provides a programmatic representation of the clip, and includes all of the clip's current properties, including custom properties.

clip : {
// accessing current clip's properties
onStart: function(clip) {
alert(clip.duration);
}
}

JavaScript

Again the variable this points to the Player instance.

Multiple event listeners

You can add multiple event listeners of the same type by using the JavaScript API. The following player has two different onStart event listeners. Click on it to see them in action.

Note that we avoid to use alert for information display, as a bug in the handling of the Flash plugin by Firefox for Mac would freeze Firefox.

Search engine friendly content
This area will be updated onStart
 
var startinfo = document.getElementById("startinfo"),
 
player = $f("myPlayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
// set up onStart event for a clip from configuration
clip: {
onStart: function() {
startinfo.innerHTML = "onStart defined in configuration<br />";
}
}
});
 
// set up additional event listener using the API
player.onStart(function() {
startinfo.innerHTML = startinfo.innerHTML + "onStart defined using Flowplayer API";
});

JavaScript

The ability to add event listeners by scripting is the foundation of JavaScript plugin development.