Embedded cuepoints Events and Cuepoints - Demo 7 / 7

Introduction

Flowplayer offers you a lot of methods for working with cuepoints. You can setup cuepoints manually by using onCuepoint in following way.

clip: {
	// make something happen on first, fifth and last second
	onCuepoint: [[1000, 5000, -1000], function(clip, cuepoint) {
		alert("cuepoint entered);
	}]
}

Cuepoints are supplied in milliseconds, not seconds. It's also possible to add cuepoints directly into the video file using tools such as flvtool1. These cuepoints are called "embedded cuepoints" and you can listen to those cuepoints in following way:

clip: {
	// do something on embedded cuepoint
	onCuepoint: function(clip, cuepoint) {
		alert("embedded cuepoint entered, time: " + cuepoint.time);
	}
}

You can find a tutorial about embedding cuepoints from here.

Example

Following video has embedded cuepoints on seconds 10, 25, 55, 75, 95 and 110. We will trigger a function that will update the info box below the video.

And here is the JavaScript coding

flowplayer("player", "/swf/flowplayer-3.1.5.swf", {
	
	clip: {
		url: '/video/honda_accord.flv',
		
		// you can do different things on each cuepoint by checking the time
		onCuepoint: function(clip, p) {
			document.getElementById("info").innerHTML = "time : " +p.time+ ", name: " + p.name;
		}
	}
});