Cue Points


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

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

rmp.on('cuepoint', () => {
  console.log('cuepoint event');
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2024 Radiant Media Player. All Rights Reserved.