Radiant Media Player

Cue points

Documentation sections


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.

Player settings

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

When a cue-point timestamp is reached by the player playhead, this setting will cause Function passed through cuePointsCallback to trigger. 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.

Cue-points API

API method


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

API event


Fires when the timestamp of a specific cue-point is reached by the playhead of the player.

Usage example

var rmpContainer = document.getElementById(elementID);
rmpContainer.addEventListener('cuepoint', function () {
  window.console.log('cuepoint event');
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.