Cuepoints
Adds cuepoint support to Flowplayer Native.
Table of contents
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>
Player and plugins exist in different release versions. Please see the release channel documentation.
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
Inside the cuepoints: [{}, {}]
array objects:
-
- property
- description
-
startTime
- numeric value in seconds (or fractions) to add cuepoint
-
endTime
- numeric value in seconds (or fractions) to remove cuepoint
-
msg
- the message to be triggered by the cupeoint
API
Properties:
-
- property
- description
-
cuepoints
- An array with currently used cuepoints
-
events
- Events that can be listened to or fired
-
CUEPOINTS
- When new cuepoints added
-
CUEPOINT_START
- When start time for a cuepoint is passed
-
CUEPOINT_END
- When end time or a cuepoint is passed
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');
})