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, MPEG-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/10.1.4/js/rmp.min.js"></script>
<div id="rmp"></div>
<script>
  const src = {
    hls: 'https://your-hls-url.m3u8'
  };
  const settings = {
    licenseKey: 'your-license-key',
    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');

  // Player initialisation
  async function initRmpPlayer() {
    try {
      await rmp.init(settings);  
      console.log('player ready');
    } catch (error) {
      console.error('Radiant Media Player failed to initialize', error);
    }
  }
  initRmpPlayer();

</script>

Chapters player API

Chapters API events

chaptersloaded

The list of chapters has been loaded

chaptersparsed

The list of chapters has been parsed

See warning 15000 and 15001 for failing notices of loading or parsing chapters.

Chapters API methods

chapters getter|setter (String)

const chapters = rmp.chapters;

rmp.chapters = 'https://www.radiantmediaplayer.com/media/vtt/chapters/chapters-bbb.vtt';

get|set chapters currently available to the player.
getter: is only available after the loadedmetadata event.

chaptersData getter (Array<ChapterTrack>)

const chaptersData = rmp.chaptersData;

This getter returns an Array<ChapterTrack> representing the loaded and filtered WebVTT chapters submitted to the player. This getter is only available after the loadedmetadata player event has fired. Each ChapterTrack Object has the following properties:

• start:Number - timestamp for beginning of chapter in milliseconds
• end:Number - timestamp for end of chapter in milliseconds
• title:String - title for chapter

Example:

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

seekToChapter(index) Promise.<|WarningData>

rmp.seekToChapter(2).then(() => {
  console.log('seekToChapter was successful');
}).catch(warning => {
  // something went wrong and the seekToChapter request was not successful
  console.warn(warning);
});

Returns a Promise that resolves if seekToChapter request was successful or rejects to a WarningData Object. 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.