Cuepoints

Adds cuepoint support to native player.

Installation

Load the plugin next to the core player.

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

Async cloud player installation

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

Configuration

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.

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:

• 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 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 do 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');
})

//CSS
.fp-cuepoint {
  background-color: #00ABCD !important;
  height: 100%;
  cursor:pointer;
  width: 5px;
}

Demo

Codepen