The VTT metadata file contains links to the actual thumbnail images, which can be in JPG, PNG or GIF format.
To use thumnails plugin you must load it first, right after video.js script, for example,<script src="/videojs/video.min.js"></script><script src="/videojs/nuevo.min.js"></script><script src="/videojs/plugins/thumbnails.min.js"></script>
<video id="player_1" class="video-js" controls width="640" height="360" playsinline poster="//path-to-poster.jpg"> <source src="//path-to-media file" type="video/mp4" /> <track kind="metadata" src="//path-to-thumbnails-vtt-file" /></video>
WEBVTT
00:00.000 --> 00:05.000/assets/thumbnail_1.jpg
00:05.000 --> 00:10.000/assets/thumbnail_2.jpg
00:10.000 --> 00:15.000/assets/thumbnail_3.jpg
00:15.000 --> 00:20.000/assets/thumbnail_4.jpg
var player = videojs("player_1");player.nuevo({ option1: "value1", option2: "value2" })player.thumbnails();
var player = videojs("player_1");player.nuevo({ option1: "value1", option2: "value2" })player.thumbnails({ width:192, height:108 });
player.nuevo({ ghostThumb:true })player.thumbnails();
WEBVTT
00:00.000 --> 00:05.000/assets/thumbnails.jpg#xywh=0,0,160,90
00:05.000 --> 00:10.000/assets/thumbnails.jpg#xywh=0,160,0,90
00:10.000 --> 00:15.000/assets/thumbnails.jpg#xywh=0,320,0,90
00:15.000 --> 00:20.000/assets/thumbnails.jpg#xywh=0,480,0,90
player.thumbnails({ basePath: "//external.url/basepath/" });
player.on('nuevoReady',function(){var track=({kind:'metadata',src:"//path-to-thumbnails-vtt-file"});player.loadTracks(track);});
player.on('ready',function(){var track=({kind:'metadata',src:"//path-to-thumbnails-vtt-file"});player.loadTracks(track);});
We also have our own bash script to generate thumbnails sprite image and VTT file with one command. It is free to download and use by our users. The logged in user will see download link and documentation below.