Videojs - VTT Sprite Thumbnails

Add preview thumbnails from VTT file

Separate 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 metdata kind VTT you can also load preview thumbnails specification and display it over progressbar based on list of VTT cues.
VTT metadata file contain 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="//www.domain.com/videojs/video.min.js"></script>
<script src="//www.domain.com/videojs/plugins/videojs.thumbnails.min.js"></script>
<script src="//www.domain.com/videojs/nuevo.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 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 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 thumnails 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 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 from sprite image

To limit file size, load delay and server requests, thumbnail 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

Code snippet

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

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 correct absolute path to your image.

Code snippet

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

There are scenarios that VTT metadata video track may fail to load for unknown reason. Nuevo plugin has an option to load VTT metadata thumbnails track programmatically that you can apply once Nuevo plugin is loaded.

Code snippet

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

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

We also have our own bash script to generate thumnails 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.