This is a message.

Flowplayer events

Introduction to basic Flowplayer event handling

standalone demo

Info

This area will be updated during the playback.

Most importantly, event handling has been made really easy. In the above example the info area is updated every time something interesting happens. Try hitting pause and adjusting volume level.

This example is not very useful for practical purposes but it will show you how to perform your own JavaScript calls when something happens on the player. You'll see all event types: clip events, player events and cuepoints.

HTML

Just the info area and the player container. Nothing special here.

<!-- player container-->
<a href="http://stream.flowplayer.org/flowplayer-700.flv" class="player"
style="display:block;width:425px;height:300px;margin:10px auto"
id="player">
<!-- splash image inside the container -->
<img src="/media/img/home/flow_eye.jpg"
alt="Search engine friendly content" /></a>

HTML

Configuration

Here you can see how events listeners are registered. Registering an event handler is as simple as setting the JavaScript functions as properties to the Flowplayer configuration.

// get handle to info element
var info = document.getElementById("info");
 
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
// listen to following clip events
clip: {
onPause: function() {
info.innerHTML = "player paused";
},
 
onResume: function() {
info.innerHTML = "player resumed";
},
 
// trigger this function on the 3rd and 8th second of playback
onCuepoint: [[3000, 8000], function(clip, point) {
info.innerHTML = "cuepoint: " + point;
}]
},
 
// invoked when player loads (not a clip specific event)
onLoad: function() {
info.innerHTML = "player loaded";
},
 
// when volume level is altered
onVolume: function(level) {
info.innerHTML =
"volume level is: <strong>" + parseInt(level) + "</strong>";
},
 
// when playback is finished we are performing unload.
onFinish: function() {
info.innerHTML = 'player unloaded upon onFinish()';
this.unload();
}
 
});

JavaScript

Inside the event handler functions you can do anything you like. You have full access to the surrounding HTML document, you can use JavaScript libraries such as jQuery or you can control the player via the Flowplayer API. Take a look at events documentation for detailed information.