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 uses 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 available 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 a 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 video 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 the 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 progress bar thumbs for Videojs with Nuevo plugin.

Code snippet

<script>
var player = videojs('example_video_1');
player.nuevo({
slideImage: '//domain.com/path/to/sprite.jpg',
slideType: 'vertical',  //optional
slideWidth: 160,  //optional
slideHeight: 90  //optional
});
</script>

From version 8.4.0 of the Nuevo plugin features a custom method to control mouse events over the progress bar. This allows to update play bar status more precisely and display ghost thumb image as video poster when mouse pressed and moved over THE progress bar. The same effect you can see on Youtube videos. To enable this exeperimenta feature you must set the appropriate Nuevo plugin option.

Code snippet

<script>
var player = videojs('example_video_1');
player.nuevo({
slideImage: '//domain.com/path/to/sprite.jpg',ghostThumb:true
});
</script>

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 for generated jpg sprite image file (required)

Of course you can call a bash script from php as well. The generated sprite jpg image is ready to use with nuevo plugin as slideImage option.