Cue Points

Introduction

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

This setting enables cue-points marking in the player. You must pass Array<CuePoint> to the player. Each CuePoint Object represents a cue-point.

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

cuePointData getter

const cuePointData = rmp.cuePointData;

This getter returns CuePoint Object representing the last cue-point that was known to the player. This should be used upon cuepoint event

API event

cuepoint

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');
  console.log(rmp.cuePointData);
});