A plugin that allows you to configure thumbnails to display when the user is hovering over the progress bar or dragging it to seek.
The plugin automatically registers itself when you include video.thumbnails.js in your page:
<script src='videojs.thumbnails.js'></script>You probably want to include the default stylesheet, too. It handles showing and hiding thumbnails while hovering over the progress bar and a quick animation during the transition:
<link href="videojs.thumbnails.css" rel="stylesheet">To activate the plugin, add it to your videojs settings object:
<script>
// initialize video.js
var video = videojs('video',{plugins:{thumbnails:{vtt:<webVTT.file>}}});
</script>The thumbnails need to be added with a VTT file. For this file, the specification used by JW Player applies. The VTT file is added as option (see above). The option "vtt" is mandatory.
Full object example:
<video id='video'
class='video-js vjs-default-skin'
width='640'
height='264'
poster='http://video-js.zencoder.com/oceans-clip.jpg'
controls>
<source src='http://video-js.zencoder.com/oceans-clip.mp4' type='video/mp4' />
</video>If your thumbnails do not include specified width and height in the VTT file (via the Media Fragment hash), you have to specify the default width and height in pixels the plugin settings:
<script>
// initialize video.js
var video = videojs('video',{plugins:{thumbnails:{vtt:oceans-clip.vtt,width:120,height:90}}});
</script>By default the VTT and the images reside in the same directory as the video.
You can add an optional basePath if you want to use images hosted on another domain or path
<script>
// initialize video.js
var video = videojs('video',{plugins:{thumbnails:{width:120,height:90, basePath : "//external.url/basepath/"}}});
</script>