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.
thumbnails sprite
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" });
VTT 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" });

Responsive thumb

VTT Thumnails features experimental option responsive, disabled by default. If enabled, thumbnail container size will be different, depending on player width. It works similiar to CSS media queries. Default percentage for specific player's width ranges are:
  • tiny (0-320px), thumbnail size - 50%.
  • small (321-540px), thumbnail size - 75%.
  • medium (540-10800px), thumbnail size - 100%.
  • large (1081-1600px), thumbnail size - 125%.
  • xlarge (1600-Infinity), thumbnail size 150%.
To enable responsive mode, just add one more option to thumbnails plugin, e.g.
Code snippet
player.thumbnails({ src:"vtt-thumbnails-url", responsive:true });
To change percentage value for each of available size ranges, you can set own mediaqueries option.
Code snippet
player.thumbnails({src:"vtt-thumbnails-url", mediaqueries: {tiny:0.4,small:0.6,medium:1,large:1.5,xlarge:2}, responsive:true});

Generating thumbs sprite image

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, available free to download by our users (login to see the link). The script requires ffmpeg tool to be installed on server.