Videojs - Thumbs over progressbar

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 192x7020 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 Videojs with Nuevo plugin.

   var player = videojs('example_video_1');
	logo: '//',
	logoposition: 'RT',
	logourl: '//',
	slideImage: '//',
	slideType: 'vertical',  //optional
	slideWidth: 192,  //optional
	slideHeight:108  //optional

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 Nuevodevel 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 installed on server. The usage is simple.
spritevideo -i [inputfile] -o [outputdirectory] -p [outputfile]
Available arguments
-i [file] - video input file (required)
-w [width] - optional single thumb width (if other than 192)
-h [height] - optional single thumb height (if other than 108)
-o [directory] - directory path to process video thumbs (required)
-p [file] - jpg sprite output file (required)
The paths to files and directories must be relative.
This is example of command to generate vertical slide image with default single thumb size 192x108 (16:9)
./spritevideo -i /relative/path/to/video.mp4 -o /relative/path/to/directory -p /relative/path/to/directory/sprite.jpg
This is example of command to generate vertical slide image with single thumb size 144x108 (4x3)
./spritevideo -i /relative/path/to/video.mp4 -w 144 -h 108 -o /relative/path/to/directory -p /relative/path/to/directory/sprite.jpg
Of course you can call bash script from php as well. Generated sprite jpg image is ready to use with nuevo plugin for slideImage option.
Sprite image with single thumb of size 192x108 (default) does not require to provide any other paramater.
If single sthumb size different than 192x108, you must provide appropriate slideWidth and slideHeight options.