Radiant Media Player supports adding cue-points (a.k.a. timestamped markers) for creating custom implementation tailored to your business needs. When a cue-point is reached the player will fire an event to allow for custom interaction. Cue-points are visible in the timeline and an information box appears when a specific cue-point is hovered. See below for settings, API methods and events available.
cuePoints: Array<Object>
This setting enables cue-points marking in the player. You must pass an Array of Object
to the player, where each Object
represents a cue-point. Each Object
has a time: Number
property expressed
in milliseconds and a text: String
property. Default: []
. Example:
cuePoints: [ { time: 5000, text: 'hello cuepoint 1' }, { time: 15000, text: 'hello cuepoint 2' }, { time: 30000, text: 'hello cuepoint 3' }, { time: 45000, text: 'hello cuepoint 4' }, { time: 60000, text: 'hello cuepoint 5' } ]
A full player example can be found on our demo page.
cuePointsCallback: Function
Each time a cue-point cuePoints.time
is reached by the player playhead,
cuePointsCallback
will run. This callback is the same for all cue-points. Default: null
.
cuePointsVisibleOnTimeline: Boolean
By default cue-points are visible on the player timeline. This setting when set to false allows for cue-points to be hidden from the timeline while having access to the cue-points API. Default: true
.
getCurrentCuePointData()
rmp.getCurrentCuePointData();
Returns Object: {time: Number, text: String}
representing the last cue-point that was made available to the player. This should be used upon cuepoint
event
cuepoint
Fires when the timestamp of a specific cue-point is reached by the playhead of the player.
rmp.on('cuepoint', () => { console.log('cuepoint event'); console.log(rmp.getCurrentCuePointData()); });
©2015-2023 Radiant Media Player. All Rights Reserved.