Videojs - Thumbs over progressbar

Display thumbnails over progressbar

One of built-in features of the Nuevo plugin for Video.js is an option to display preview thumbnails over progressbar when you hover it with your mouse. The player itself cannot extract thumbnails from video. Our plugin use sprite image file consisting of multiple, same size thumbnails tiled one after another either vertically or horizontally.
Thumbnails must be extracted from entire video length in exactly same time intervals. To show thumbnails over progressbar you need to define the URL of sprite image.
Below you can see options avilable to set for thumbs display over the progress bar.
  • slideImage (required) - URL of the sprited image file.
  • slideType - method used to tile single thumbs into sprite image. Default is vertical, can be also horizontal.
From our experience we found that maximum 100 thumbnails is enough precise to show it over progressbar. Anything above 100 thumbnails only increase time required to generate sprite image. Anything below 50 may not be enough precise, especially in fullscreen mode. Of course for short vidoes it can be smaller number. The maximum frequency is one thumb per second of video length.
You do not have to bother about thumbs timestamps. This is automatically calculated by our plugin.


In example above we use sprit image of 192x7020 pixels size with 65 thumbnails, each of 192x108 pixels size, tiled vertically - sprite.jpg.
Video length is relatively short, about 129 seconds, so it's easy to calculate that video thumbnails were extracted per each ~2 seconds from entire video length.

See Nuevo plugin setup code example below how you can define progressbar thumbs for Videojs with Nuevo plugin.
Code snippet
<script>
   var player = videojs('example_video_1');
   player.nuevo({
	logo: '//domain.com/path/to/logo.png',
	logoposition: 'RT',
	logourl: '//domain.com',
	slideImage: '//domain.com/path/to/sprite.jpg',
	slideType: 'vertical',  //optional
	slideWidth: 192,  //optional
	slideHeight:108  //optional
   });
</script>

There are multiple ways to extract thumbs from video and tile it into a single sprited image either vertically or horizontally. You can even find easy ffmpeg commands to extract multiple thumbs and tile it as you want. Unfortunately. most of such commands are based on video frame rate and this cannot be reliable method as frame rate can be different for each video, can even change for same video. So it's better to extract jpg thumbs from timestamps and later tile it into single jpg sprite image.

For our users we have prepared a simple spritevideo bash script to generate ready sprite jpg image from video thumbnails.
Script requires ffmpeg installed on server. The usage is simple.
Code snippet
spritevideo -i [inputfile] -o [outputdirectory] -p [outputfile]

Available arguments:
-i video input file (required)
-o directory relative path to process video thumbs (required)
-p relative path to generated jpg sprite image (required)
Of course you can call bash script from php as well. Generated sprite jpg image is ready to use with nuevo plugin as slideImage option.