Videojs - VTT Sprite Thumbnails

Add preview thumbnails from VTT file

The eeparate thumbnails plugin supports the loading of preview thumbnails from WebVTT metadata kind file. WebVTT is a plain text format, part of the HTML5 standard, that's mainly used for providing closed captions and chapters. Using metadata kind VTT you can also load preview thumbnails specification and display it over progressbar based on a list of VTT cues.
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,

Code snippet

 <script src="/videojs/video.min.js"></script>
 <script src="/videojs/nuevo.min.js"></script>
 <script src="/videojs/plugins/thumbnails.min.js"></script>

There are 2 methods to load VTT file, proccess VTT protocol and display thumbs. One stable method that works across all browsers and devices is to provide src option when plugin is initialized.

Code snippet

 <script>
 let player = videojs("my_player_id");
 player.nuevo();
 player.thumbnails({ src:"vtt-thumbnails-url" })
 </script>

You can also load thumbnails as VTT metadata track element through loadTracks function. This is useful when you have multiple tracks to load.

Code snippet

 <script>
 let player = videojs("my_player_id");
 player.nuevo();
 player.thumbnails();
 player.on('loadeddata',function(){
 var tracks=[
 {kind:'metadata',src:"//path-to-thumbnails-vtt-file"},
 {kind:'captions',src:"//path-to-captions-vtt-file",srclang:"en",label:"English", default:1},
 {kind:'captions',src:"//path-to-captions-vtt-file",srclang:"de",label:"German" }
 ]
 player.loadTracks(tracks);
 });
 </script>

There are 2 methods to prepare thumbnail image(s) and VTT file.

Single image thumbnails

It's simple. For each thumbnail you prepare a single image in JPG, PNG or GIF format. Though it's suggested to keep the same size for each image, it can be also different size, but it should keep the same display ratio. In VTT file you just type the image path (relative or absolute) for each time cue.

Code snippet

 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

Default size of single thumbnail over progress bar is 160x90 pixels. if you prefer other size you can set it as thumbnails plugin options.

Code snippet

 player.thumbnails({ src:"vtt-thumbnails-url", width:192, height:108 });

Thumbnails from sprite image

To limit file size, load delay and server requests, the thumbnails plugin supports Thumbnail Sprites; multiple thumbnails tilled into a single image.

In the VTT file, the individual thumbnails are identified by appending their coordinates to the thumbnail URL, for example:

Code snippet

 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

The size of the single thumbnail from sprite image is determined by VTT xywh definition.
Setting relative path for single thumb image can be tricky, but you have a plugin's option to setup global path or URL for single images through basePath option.

Code snippet

 player.thumbnails({ basePath: "global-path-or-url", src:"vtt-thumbnails-url" });

Thumbnails plugins by Nuevodevel.com support ghostThumb option. This allows to display ghost thumb as video poster while mouse down and moved over the progress bar.

Code snippet

 player.nuevo({ ghostThumb:true })
 player.thumbnails({ src:"vtt-thumbnails-url" });

The structure of VTT thumbnails file and sprite image are exactly same as for JWPlayer preview thumbnails from sprite image, described here. Since JWPlayer is popular we believe that many users are familiar with this technique and may have a thumbnails sprite generator as preparing thumbnails sprite image manually is a rather horrible task.

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.