Flowplayer Events Player configuartion taken to the next level

• introduction
• player events
• clip events
• cuepoints

Introduction

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

Demo

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

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.

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.1.5.swf", { 
	clip: {
	
		// load data from the server
		onStart: function(clip) {
			$("#info").load("get-data.php?index=" + clip.index);
		}
	}
});

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 it's elements or you can use your favourite JavaScript library. On our site we use jQuery because we like it.

Inside events

Inside your event functions you have access to the Flowplayer internals as described next.

The context

In JavaScript a context is an object within which you are operating. In essence the context works trough this- variable. In Flowplayer events you can use the this variable 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();
	}
}

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);
	}
}

Again this- variable points to the Player instance

Multiple event listeners

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

var player = $f("myPlayer", "/swf/flowplayer-3.1.5.swf", {

	// setup onStart event for a clip from configuration 
	clip: {
		onStart: function() {
			alert("onStart defined in configuration");
		}
	}
});

// setup additional event listener using the API
player.onStart(function() {
	alert("onStart defined using Flowplayer API");
})

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

• Technical Facts
• Version History