VTT Preview Thumbnails

Mouse over progressbar to see the time thumbnails once video started to play.

Tutorial

To use VTT based thumnails plugin you must load it first, right after video.js script, for example:

<link href="../videojs/skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />
<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 details need to be added via VTT file as a metadata video track element, for example:

<video id="player_1" class="video-js" controls width="640" height="360" playsinline poster="//path-to-poster.jpg" crossorigin="anonymous">
	<source src="//path-to-media file" type="video/mp4" />
	<track kind="metadata" src="//path-to-thumnails-vtt-file" />
</video>

Finally you must initialize thumbnails plugin along with videojs and nuevo plugin

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

It is possible to load thumbnails VTT file manually through javascript on player ready event instead of using video <track> element, e.g.

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

Same like for built-in thumbnails you can display shadow thumb over player window when you hold your mouse pressed over progressbar.

<script>
var player2 = videojs("player_2");
player2.nuevo({ ghostThumb:true })
player2.thumbnails();
</script>

Please note that ghostThumb options will work only with thumbnails tilled on single sprite image.

To learn what are thumbnails images or thumbnails single sprite image, and to learn what VTT file structure should be, please visit VTT Thumbnails dedicated resource. If you login on Nuevodevel website you will also gain access to download bash sprite/vtt generator free script.