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>
srcoption when plugin is initialized.
Code snippet
<script> let player = videojs("my_player_id"); player.nuevo(); player.thumbnails({ src:"vtt-thumbnails-url" }) </script>
loadTracksfunction. 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>
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
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.
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
xywhdefinition.
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
basePathoption.
Code snippet
player.thumbnails({ basePath: "global-path-or-url", src:"vtt-thumbnails-url" });
Code snippet
player.nuevo({ ghostThumb:true }) player.thumbnails({ src:"vtt-thumbnails-url" });
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.