Cuepoints

The Flowplayer Native cuepoints plugin adds cuepoints to the player: time ranges with a start and end time in seconds that you can use to trigger timed custom actions during playback.

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 players

To enable the plugin in an OVP JavaScript (ESM) embed, import the plugin's ESM module after the embed module and register it with flowplayer(cuepoints) before you create the player:

<div id="player-<media id>"></div>
<script type="module">
  import flowplayer from "https://embed.flowplayer.com/<player id>/<media id>.js";
  import cuepoints from "https://cdn.flowplayer.com/releases/native/3/stable/esm/plugins/cuepoints.min.js";

  flowplayer(cuepoints);
  flowplayer("#player-<media id>", {});
</script>

Load the plugin from the same release channel or version as the player. In legacy async embeds, add "cuepoints" to the "plugins": [] array instead.

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

    • 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

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

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.cuepoints.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.cuepoints.events.CUEPOINT_START, function(e) {
    console.log('Cuepoint started', e.detail.cuepoint.msg);
})
player.on(flowplayer.cuepoints.events.CUEPOINT_END, function(e) {
    console.log('Cuepoint ended');
})

Demo

try.flowplayer.com demo

Consent MPEG DASH
Results