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 start
and end
properties which represents the start and end time, in seconds, for each cuepoint.
Configuration options
Cuepoints can be added to the timeline as <span>
on the timeline-element and are stylable with class fp-cuepoint
, by using the top level configuration property draw_cuepoints
. The cuepoints are transparent and without any styling at start. The sample below demostrates how to style cuepoints with simple CSS.
API
Properties:
Add/Remove cuepoints
Adding and removing cuepoints while playing can done by modifying the player's cuepoints
-property using ordinary array methods. Adding a new cuepoint can for example be done with push
:
api.cuepoints.push({start: 1, end: 3})
Note that communicating with the cuepoints
-property does not trigger redrawing of cuepoints on the timeline. To trigger redraw you need to trigger the CUEPOINTS
-event:
api.emit(
flowplayer.event.CUEPOINTS,
{ cuepoints: api.cuepoints.concat({start: 1, end: 3}) }
);
Sample code
//JavaScript
var api = flowplayer('#container', {
src: "https://edge.flowplayer.org/bauhaus.m3u8"
, cuepoints: [
{start: 0.5, end:3, msg: "Cuepoint 1"}
, {start: 5, end:7, msg: "Cuepoint 2"}
, {start: 10, end:15, msg: "Cuepoint 3"}
, {start: 20, end:24, msg: "Cuepoint 4"}
]
, draw_cuepoints: true
})
api.on(api.events.CUEPOINT_STARTED, function(e) {
console.log('Cuepoint started', e.data.cuepoint.msg);
})
api.on(api.events.CUEPOINT_ENDED, function(e) {
console.log('Cuepoint ended');
})
Sample CSS
//CSS
.fp-cuepoint {
background-color: #00ABCD !important;
height: 100%;
cursor:pointer;
width: 5px;
}