VTT Preview Thumbnails

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


To use VTT based thumnails plugin you must load it first, right after video.js script, for example:
<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 with a VTT file as a metadata track to the video object, 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" />

In video example above we use:
<video id="player_1" class="video-js vjs-fluid" controls preload playsinline webkit-playsinline poster="images/poster.jpg" crossorigin="anonymous">
		<source src="https://opencdn.b-cdn.net/video/demo_720.mp4" type="video/mp4">
		<source src="https://opencdn.b-cdn.net/video/demo_720.webm" type="video/webm">
		<track kind="metadata" src="images/slides/demo.vtt" />

Finally you must initialize thumbnails plugin along with videojs and nuevo plugin
var player = videojs("player_1");
player.nuevo({ option1: "value1", option2: "value2" })

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.