Event bubbling Events and Cuepoints - Demo 2 / 7

Introduction

In Flowplayer you can bind event listeners to both playlist entries and to common clip. 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.

NOTE: the demo will trigger JavaScript alert boxes which may be annoying but are most suitable for demonstrating event bubbling.

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

Flowplayer configuration

You can see onStart listener bind to both common clip and 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 borrowed from DOM programming.

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

	// common clip events are common to each clip in the playlist 
	clip: {
		onStart: function() {
			alert("common clip event");
		}
	}, 
	
	// playlist events are evaluated first. 
	playlist: [{		
		onStart: function() {
			alert("clip specific event");
			
			// if we would return false here then common clip's onStart would not be called
			return true;
		}
	}] 
});