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>
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>
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 same size for each image, it can be also different size, but it should keep 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
Code snippet
var player = videojs("player_1"); player.nuevo({ option1: "value1", option2: "value2" }) player.thumbnails();
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.
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();
Code snippet
player.thumbnails({ basePath: "//external.url/basepath/" });
Code snippet
player.on('nuevoReady',function(){ var track=({kind:'metadata',src:"//path-to-thumbnails-vtt-file"}); player.loadTracks(track); });
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.