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 progress bar 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 the same time intervals. To show thumbnails over progressbar you need to define the URL of sprite image.
Below you can see the 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 have found that maximum 100 thumbnails are enough precise to show preview image over progress bar precisely. Anything above only increase the time required to generate sprite image. Anything below 50 may be not enough precise, especially in fullscreen mode. For short vidoe this 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 pixel size with 65 thumbnails, each of 192x108 pixel 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
   var player = videojs('example_video_1');
	logo: '//',
	logoposition: 'RT',
	logourl: '//',
	slideImage: '//',
	slideType: 'vertical',  //optional
	slideWidth: 160,  //optional
	slideHeight: 90  //optional
From version 8.4.0 of the Nuevo plugin features custom method to control mouse events over progress bar. This allows to update play bar status more precisely anddisplay ghost thumb image as video poster when mouse pressed and moved over progress bar. The same effect you can see on Youtube videos. To enable this exeperimenta feature you must set appropriate Nuevo plugin option.
Code snippet
   var player = videojs('example_video_1');
	slideImage: '//',ghostThumb:true
We have prepared a simple spritevideo bash script to generate ready sprite jpg image from video file.
The 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)
-w width of the single thumb [optional], default=160
-h height of the simgle thumb [optional], default=90
-o directory relative path to process video thumbs (required)
-p relative path fpr 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.