Radiant Media Player

Chapter markers (WebVTT)


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.


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

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

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

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

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

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

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=""></script>
<div id="rmpPlayer"></div>
var src = {
  mp4: [
var 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: '',
  contentMetadata: {
    poster: [
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);

Chapters player API



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'



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.

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