As of Nuevo plugin version 14.0.0 it is possible to display video chapters as list entries on the right side of the player.
Each chpter entry includes chapter's title, start time and optionally chapter's thumbnail. It is the perfect solution for presenting tutorials consisting of several parts/chapters.
You need to enable
chaptersList
player or nuevo plugin option. e.g.
const player = videojs("myplayer", {license: "license_key", chaptersList:true });
or
player.nuevo({ chaptersList:true })
The format for WebVTT chapters is exactly the same as what is presented in the chapters demo. However, if you want to display chapter thumbnails, you must enter the thumbnail URL in the line reserved for chapter ID, which usually is not used, e.g.
WEBVTT
htpps://path-to-thumbnail_1.jpg
00:00:00.000 --> 00:00:30.000
Chapter I Title
htpps://path-to-thumbnail_2.jpg
00:00:30.000 --> 00:00:56.000
Chapter II Title
htpps://path-to-thumbnail_3.jpg
00:00:56.000 --> 00:05:34.000
Chapter III Title
Chapter's thumbnail image size is 80x45 pixels (16:9 resolution).
If you do not specify the chapter thumbnail URL, the thumbnail containers on the list will be numbered automatically.