Radiant Media Player

Chapter markers (WebVTT)



Documentation sections


Introduction

Radiant Media Player supports the loading and display of WebVTT chapters. Chapter marks will be rendered in the player control bar and a tool-tip displaying the chapter title will be shown when a specific chapter mark is hovered. This is available for both desktop and mobile devices. For advanced use-cases a dedicated chapters player API is available. WebVTT chapters are also available for the audio-only player.

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

When both WebVTT chapters and preview thumbnails are provided to the player only WebVTT chapters will be rendered to avoid conflicting UI.


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

<script src="https://cdn.radiantmediatechs.com/rmp/4.5.15/js/rmp.min.js" 
  integrity="sha384-UOGahVOpoWqVqcgcNFKFOEWH3RV2PoLAq2jmk8g1u9VR/bL8dqsHAsDGwFHPkmuE"
  crossorigin="anonymous"></script>
<div id="rmpPlayer"></div>
<script>
var bitrates = {
  mp4: [
    'https://www.rmp-streaming.com/media/sintel.mp4'
  ]
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  width: 640,
  height: 272,
  // here we tell the player where to look for a WebVTT chapters file
  chaptersLoc: 'https://www.radiantmediaplayer.com/media/chapters.vtt',
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-chapters.jpg'
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
rmp.init(settings);
</script>

Example

Below is an example of player rendering WebVTT chapters:


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. null is returned in case chapters data are not available. 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.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.