Cuepoints

Adds cuepoint support to Flowplayer Native.

Manual installation

To use the plugin in standalone Javascript setups, load the plugin next to the core player.

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/cuepoints.min.js"></script>

OVP managed async players

To enable the plugin in the async cloud player, declare it in the "plugins": [] config object with cuepoints .

Configuration (mandatory)

You can configure the plugin with top level configuration option cuepoints. cuepoints accepts an array of Json-objects that must contain at least startTime and endTime properties which represents the start and end time, in seconds, for each cuepoint.

Configuration options

Cuepoints can be added on the timeline-element and are stylable with class fp-cuepoint, by using the top level configuration property draw_cuepoints.

In the configuration root (top level):

Inside the cuepoints: [{}, {}] array objects:

API

Properties:

Add/Remove cuepoints

Adding and removing cuepoints while playing can done, by emitting the CUEPOINTS event, and modifying the player's opts.cuepoints property using ordinary array methods.

player.emit(
 flowplayer.events.CUEPOINTS,
 { cuepoints: player.opts.cuepoints.concat({startTime: 1, endTime: 3}) }
);

Sample code

//JavaScript
var player = flowplayer('#container', {
 src: "https://edge.flowplayer.org/bauhaus.m3u8"
 , cuepoints: [
 {startTime: 0.5, endTime:3, msg: "Cuepoint 1"}
 , {startTime: 5, endTime:7, msg: "Cuepoint 2"}
 , {startTime: 10, endTime:15, msg: "Cuepoint 3"}
 , {startTime: 20, endTime:24, msg: "Cuepoint 4"}
 ]
})
player.on(flowplayer.events.CUEPOINT_START, function(e) {
 console.log('Cuepoint started', e.data.cuepoint.msg);
})
player.on(flowplayer.events.CUEPOINT_END, function(e) {
 console.log('Cuepoint ended');
})

Demo

try.flowplayer.com demo