Videojs - VTT Sprite Thumbnails

STANDARD

PREMIUM

GOLD

The separate thumbnails plugin supports the loading of preview thumbnails from a WebVTT file. WebVTT is a plain text format, part of the HTML5 standard, that is mainly used for providing closed captions and chapters. You can also use the VTT specification to define preview thumbnails and display them over the progress bar based on a list of VTT cues. The VTT metadata file contains links to the actual thumbnail image, which can be in JPG, PNG, or GIF format.
To use the thumbnails plugin, you must load it first, right after the video.js script, e.g.

Code snippet

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

There are two methods to load the VTT file, process the VTT protocol and display thumbs. One stable method that works across all browsers and devices is to provide the VTT file URL in the plugin's src option.

Code snippet

 <script>
 const player = videojs("my_player_id", {license:"key"});
 player.nuevo();
 player.thumbnails({ src:"vtt-thumbnails-url", basePath:"thumbnail-image-directory-url/" })
 </script>

There are two methods to prepare and include thumbnail image(s) for a VTT file.

Thumbnails from single images.

For each thumbnail, you must prepare a single image in JPG, PNG, or GIF format. Though it is suggested to keep the same size for each image, it can also be a different size, but you should keep the same display ratio for each image. In the VTT file, just enter the image filename for each time cue.

Code snippet

 WEBVTT

 00:00.000 --> 00:05.000
 thumbnail_1.jpg

 00:05.000 --> 00:10.000
 thumbnail_2.jpg

 00:10.000 --> 00:15.000
 thumbnail_3.jpg

 00:15.000 --> 00:20.000
 thumbnail_4.jpg

The default size of a single thumbnail is 160x90 pixels. If you prefer another size, you can set it as a plugin's option.

Code snippet

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

Thumbnails from sprite image

To limit file size, avoid loading delays, and limit the number of server requests, the thumbnails plugin supports Thumbnail Sprites - multiple thumbnails in one tiled image.

In the VTT file, the individual thumbnails are identified by appending their coordinates to the thumbnail URL, e.g.

Code snippet

 WEBVTT

 00:00.000 --> 00:05.000
 thumbnail.jpg#xywh=0,0,160,90

 00:05.000 --> 00:10.000
 thumbnail.jpg#xywh=0,160,0,90

 00:10.000 --> 00:15.000
 thumbnail.jpg#xywh=0,320,0,90

 00:15.000 --> 00:20.000
 thumbnail.jpg#xywh=0,480,0,90

The size of the single thumbnail from the sprite image is determined by the VTT xywh definition.
The VTT sepcification and preparing sprite image are exactly the same as for JWPlayer, described here. Since JWPlayer is popular, we believe that many users are familiar with this technique and are able to prepare tiled images.

We also prepared a bash script to generate a tiled sprite image from video and a VTT file with one command. You need to have ffmpeg tool installed on your server. The script is free to download and use by logged-in users.