This is a message.

Event bubbling

Handling events that are propagated up to the playlist from the clip

Search engine friendly content

Clip events will appear below:

standalone demo

When an event occurs the playlist listener is called first and after that the common clip listener is called. This is called "event bubbling" - a term that is mostly used in HTML/DOM programming.

This demo is a bit advanced but you should respect this if you are extending Flowplayer functionality with scripting.


You can see an onStart listener bind both to the common clip and to a playlist entry. You can cancel the bubbling so that the common clip event is not called by returning false from the playlist event listener. This kind of design pattern is also used in DOM programming.

// helper function to display alerts
function pagealert (msg) {
// use each() method provided by the flowplayer api to cycle through DIV tags
$f.each(document.getElementsByTagName("div"), function () {
if (this.className == "palert") {
this.innerHTML += "<p>" + msg + "</p>";
// stop cycle
return false;
$f("player", "", {
// listeners defined in the common clip will be invoked
// for all clips in the playlist
clip: {
onStart: function() {
pagealert("common clip event");
// specific clip events, e.g. inside a playlist, are invoked first
playlist: [{
onStart: function() {
pagealert("clip specific event");
// if we would return false here then common clip's onStart
// would not be called
return true;