chapter-vtt turns a wall of text with timestamps into a WebVTT file for use in video chapters.
This is an example video description one might have
0:00 Chapter 1
0:03 Chapter 2
0:07 Chapter 3
Some more different text
turns into
WEBVTT - from chapter-vtt
00:00:00 --> 00:00:03
Chapter 1
00:00:03 --> 00:00:07
Chapter 2
00:00:07 --> 00:01:00
Chapter 3
the 1 minute timestamp for the final chapter is the video's duration
npm i chapter-vtt
import chaptervtt from 'chapter-vtt';
const vtt: string = chaptervtt(video.description, video.duration);If you're using Vidstack, it's very easy to integrate chapter-vtt and get slider chapters working.
// 'can-play' event on media-player
function onCanPlay(event) {
const vtt: string = chaptervtt(video.description, video.duration);
if (vtt.includes('-->')) { // check for a cue
mediaPlayer.textTracks.add({
type: 'vtt',
kind: 'chapters',
default: true,
content: vtt
});
}
}chapter-vtt is licensed under the MIT License