VTT Preview Thumbnails

Tutorial

<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>

<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>

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" />
</video>

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

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({ shadowSlide:true })
player2.thumbnails();
</script>

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.