Video.js player - Thumbs over progressbar

DOCUMENTATION

Diplay thumbnails over progressbar One of built-in features of Nuevo plugin for Video.js is option to display video thumbnails over progressbar when you hover it with your mouse. Player itself cannot extract thumbs from video. This must be sprited image file consisting of multiple, same size thumbnails tiled one after another eiher vertically or horizontally.
Thumbs must be extracted from entire video length in exactly same time intervals. To show thumbs over progressbar you need to define URL of sprited image. If width and height of single thumbnail is different than default 192x108 size, youmust define it as well.
Below you have options avilable to set for thumbs display over progress bar.
  • slideImage (required) - URL of the sprited image file.
  • slideWidth - width of the single thumb from sprited image (pixels). Default value is 192.
  • slideHeight - height of the single thumb from sprited image (pixels). Default value is 108.
  • slideType - method used to tile single thumbs into sprite image. Default is vertical, can be also horizontal.
From our experience we found that maximum 80 thumbs is enough precise to show over progressbar. Anything above 80 only increase time required to extract thumbs and generate sprited image. Anything below 50 may not be enough precise, especially in fullscreen mode, though still wil work. Of course for short vidoes it can be smaller number, but maximum is one thumb per second of video length.
You do not have to bother about thumbs timestamps. This is automatically calculated by our plugin.
You should remember to keep same aspect ratio for thumb size and thumb container displayed over progressbar.

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

See Nuevo plugin setup code example below how you can define progressbar thumbs for Video.js with Nuevo plugin.

<script>
var player = videojs('example_video_1',{},function(){ 
	this.nuevoPlugin({
		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>

Of course you do not have to use slideWidth and slideHeight options if it is equal to default values 192x108. Same you do not have to use and change options thumbWidth and thumbHeight if default size 192x108 is what you accept.

There are multiple ways to extract thumbs from video and tile it into 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 framerate and this cannot be reliable method as framerate can be different for each video, can be even variant within same video. So it's better to extract jpg thumbs from timestamps and later tile it over obe jpg sprite image.

For certain video scripts or CMS that we know Nuevolab provides ready thumbs sprite generator, but it's not possible for other hundreds possible scripts and CMS.
However we have prepared a simple spritevideo bash script to generate ready sprite jpg image from video thumbs.
Script requires ffmpeg and imagemagick installed on server. The usage is very simple.
spritevideo -i [inputfile] -o [outputdirectory] -p [outputfile]
Arguments
-i [file] - video input file
-o [directory] - directory path to process video thumbs
-p [file] - jpg sprite output file
The paths to files and directories must be relative. Example:
./spritevideo -i /relative/path/to/video.mp4 -o /relative/path/to/directory -p /relative/path/to/directory/sprite.jpg
Of course you can call bash script from php. Generated sprite jpg image is ready to use with nuevo plugin for slideImage option.