Documentation

Radiant Media Player

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

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

API event

cuepoint

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');
  window.console.log(rmp.getCurrentCuePointData());
});
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.

©2015-2021 Radiant Media Player. All rights reserved.