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.
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.
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.
<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>
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
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 millisecondsend:Number
- timestamp for end of chapter in millisecondstitle:String
- title for chapterExample:
{ 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.
©2015-2025 Radiant Media Player. All Rights Reserved. ✝