Videojs - Thumbs over progressbar

Display thumbnails over progressbar

One of the built-in features of the Nuevo plugin is the option to display preview thumbnails over the progress bar when you hover over it with your mouse. The player itself cannot extract thumbnails from video through Jacascript. Our plugin uses a sprite image file consisting of multiple, same-size thumbnails tiled one after another, either vertically or horizontally.
Thumbnails must be extracted from the entire video length in exactly the same time intervals. To show thumbnails over the progressbar you need to define the URL of the sprite image. Below, you can see the options available to set for the thumbs display over the progress bar.

slideImage (required) - URL of the sprite image file.
slideType - method used to tile single thumbs into a sprite image. The default is vertical, but it can also be horizontal.

You do not have to worry about thumb timestamps. This is automatically calculated by the plugin.

In the example above, we use a sprite image of 192x720 pixel size with 65 thumbnails, each of 192x108 pixel size, tiled vertically. The video length is relatively short, about 129 seconds, so it's easy to calculate that video thumbnails were extracted per ~2 seconds from the entire video length.

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>

The Nuevo plugin features a custom method to control mouse-press events over the progress bar. This allows you to display a ghost thumb image as a video poster when the mouse is pressed and moved over the progress bar. To enable this 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 created a simple spritevideo bash script to generate a ready jpg sprite image from a video file. The script requires ffmpeg installed on the 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)