Introduction to event programming Events and Cuepoints - Demo 1 / 7
Example setup
In Flowplayer 3 events are taken seriously. Events are the building blocks for plugins and are at the heart of extending the player's functionality. Most importantly, they are really easy to use. In following example the info area is updated every time something interesting happens. Try hitting pause and adjusting volume level.
This example is not very useful 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 Coding
Just the info area and the player container. Nothing special here.
<!-- info area -->
<div class="box petrol" id="info">
This info area will be updated during the playback.
</div>
<!-- player container -->
<a href="http://flowplayer.org/video/flowplayer-700.flv" id="player"
style="display:block;width:425px;height:300px">
<!-- .. with a splash image -->
<img src="/img/home/flow_eye.jpg" alt="Search engine friendly content" />
</a>Flowplayer configuration
Here you can see how events are listened. You set JavaScript functions as properties to the Flowplayer configuration. Could this be more simple?
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 play with the Flowplayer API. Take a look at events documentation for detailed information.
// get handle to info element
var info = document.getElementById("info");
$f("player", "/swf/flowplayer-3.1.5.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();
}
});