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>

The thumbnails need to be added with a VTT file as a metadata track to the video object, for example:

Code snippet

<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>

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

You need to initialize the thumbnails plugin, right after videojs player or nuevo plugin.

Code snippet

var player = videojs("player_1");
player.nuevo({ option1: "value1", option2: "value2" })
player.thumbnails();

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

var player = videojs("player_1");
player.nuevo({ option1: "value1", option2: "value2" })
player.thumbnails({ width:192, height:108 });

Thumbnails plugin by Nuevodevel.com supports 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();

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

For both: single and sprite thumbnails you can add an optional basePath if you want to use images hosted on another domain or to be sure of the correct absolute path to your image.

Code snippet

player.thumbnails({ basePath: "//external.url/basepath/" });

If the VTT metadata track fails to load, Nuevo plugin has an option to load VTT metadata thumbnails track programmatically that you can apply once a player or Nuevo plugin is loaded.

Code snippet

player.on('nuevoReady',function(){
var track=({kind:'metadata',src:"//path-to-thumbnails-vtt-file"});
player.loadTracks(track);
});

Code snippet

player.on('ready',function(){
var track=({kind:'metadata',src:"//path-to-thumbnails-vtt-file"});
player.loadTracks(track);
});

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.