Cuepoints plugin

This plugin adds Cuepoint support to Wowza Flowplayer.

Installation

To use the plugin, load the plugin next to the core player.

Copy

Copied

<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>

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.

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):

Property	Values	Description
`draw_cuepoints` v3.4.6	true, false	Whether to show the cuepoints in the timeline. Can be styled through the `.fp-cuepoint` CSS class.

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 cuepoint.

info

Please note the end and start properties were changed to endTime and startTime with the v3.x releases, while draw_cuepoints was removed from v3.0 until v3.5 and reintroduce in v3.6.

API

The properties are:

Property	Description
`cuepoints`	An array with currently used cuepoints.
`events`	Events that can be listened to or fired.
`CUEPOINTS`	When new cuepoints are added.
`CUEPOINT_START`	When the start time for a cuepoint is passed.
`CUEPOINT_END`	When the end time for a cuepoint is passed.

Add and 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.

Copy

Copied

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

Sample code

Copy

Copied

//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

Go to our Flowplayer sandbox and try this demo.