Flowplayer Events Player configuartion taken to the next level
Cuepoints
Cuepoints are a powerful way of executing code at predefined times during playback. This mechanism is especially useful for long videos where you might want to have special events triggered during the period in which the video is playing. For example, in teaching videos you might want to enrich your clip with help texts or other interactive material. Or, in a more commercial setting, you might want to show targeted advertisements at certain points in the video.
Here is a basic cuepoint configuration for a clip
clip : {
url: 'example.f4v',
onCuepoint: [
// each integer represents milliseconds in the timeline
[4000, 1100, 3600, -2300],
// this function is triggered when a cuepoint is reached
function(clip, cuepoint) {
alert("cuepoint " + cuepoint + " entered on clip " + clip.url);
}
]
}If the time is given as a negative integer, then it is calculated from the end of the video. So -1 means the last second of the video, -2 means two seconds from the end of the video, and so on.
Cuepoint properties
Each cuepoint can optionally have custom properties that are supplied to the event handler.
clip : {
url: 'example.m4v',
onCuepoint: [
// setup last two cuepoints with custom properties
[
4,
{time: 1100, caption: 'Something weird happened here', bottom:0},
{time: 3300, duration: 5400, title: 'Acme home', url:'http://www.acme.org'}
],
// cuepoint argument can have properties
function(clip, cuepoint) {
if (cuepoint.url) {
showAdvertisement(cuepoint);
} else if (cuepoint.caption) {
showCaption(cuepoint);
}
}
]
}Single cuepoint
Sometimes you just want to define a single cuepoint and not a long list. In that case, you can omit the array and just supply one number.
clip: {
// cause something to happen two seconds before playback ends
onCuepoint: [-2000, function() {
}];
}You can also add cuepoints by scripting. Here is an example.
onLoad: function() {
this.onCuepoint([1100, 2400, 3350], function(clip, cuepoint) {
// put some logging information into firebug console
console.log("cuepoint entered", clip, cuepoint);
});
}Cuepoint example
This example uses two cuepoints that both print messages using the content plugin.
$f("example7", "/swf/flowplayer-3.1.5.swf", {
// these properties and events are common to each clip in the playlist
clip: {
url: 'http://blip.tv/file/get/KimAronson-TwentySeconds1318.flv',
// playback lasts only 10 seconds
duration: 10,
// print message on seconds 2 and 7
onCuepoint: [[2000, -3000], function(clip, point) {
this.getPlugin("content").setHtml(this.id() + ": " + point);
}]
},
// setup content plugin
plugins: {
content: {url: 'flowplayer.content-3.1.0.swf'}
}
});