Chapter Markers (WebVTT)

Introduction

Radiant Media Player supports the loading and display of WebVTT chapters. Chapters are rendered as a player module. This is available for both desktop and mobile devices. For advanced use-cases a dedicated chapters player API is available. WebVTT chapters are not available for the audio-only player.

WebVTT chapters are supported for on-demand video with HLS, DASH or progressive download.

WebVTT chapters file example

More information on the WebVTT format can be found here. Below is an example of WebVTT file holding chapter data that works with Radiant Media Player. We suggest you use this as a start point for your implementation.

WEBVTT

1
00:00:00.000 --> 00:01:42.000
I. Opening credits

2
00:01:42.500 --> 00:04:44.000
II. A dangerous quest

3
00:04:43.500 --> 00:05:50.000
III. The attack

4
00:05:50.000 --> 00:08:24.000
IV. In pursuit

5
00:08:24.000 --> 00:10:13.000
V. Showdown in the cage

6
00:10:13.000 --> 00:12:24.000
VI. Eye to eye

7
00:12:25.000 --> 00:14:48.000
VII. This is a long, very long, very very long, Ending Credits

This example can be viewed online here.

WebVTT files should always be saved in UTF-8 encoding to prevent character issues.

Player settings and code example

Player settings

chaptersLoc: String

This setting tells the player it should load and display WebVTT chapters. The chaptersLoc setting can either be a fully qualified URL or a local/absolute path to a WebVTT file holding chapters information. Note that the WebVTT file is loaded with XMLHttpRequest and thus it must be delivered with proper CORS setting for cross-site requests.

Player code example - see this example here

<script src="https://cdn.radiantmediatechs.com/rmp/9.1.1/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
const src = {
  mp4: [
    'https://your-mp4-url.mp4'
  ]
};
const settings = {
  licenseKey: 'your-license-key',
  src: src,
  width: 640,
  height: 272,
  // here we tell the player where to look for a WebVTT chapters file
  chaptersLoc: 'https://www.radiantmediaplayer.com/media/vtt/chapters/chapters.vtt',
  contentMetadata: {
    poster: [
      'https://your-poster-url.jpg'
    ]
  }
};
const rmp = new RadiantMP('rmp');
rmp.init(settings);
</script>

Chapters player API

getChapters()

rmp.getChapters();

This getter returns an Array of Object representing the loaded and filtered WebVTT chapters submitted to the player. This getter is only available after the loadedmetadata player event has fired. Each Object of the Array holds a start:Number (timestamp for beginning of chapter in milliseconds), end:Number (timestamp for end of chapter in milliseconds) and title:String (title for chapter) properties. Example:

{
  start: 50000,
  end: 150000,
  title: 'II. this is chapter two'
}

seekToChapter(index)

rmp.seekToChapter(2);

This method allows to seek to a specific chapter start timestamp. The input index:Number parameter tells which chapter to seek to. Chapters index start at 0. Out of range requests will be ignored.