Videojs - Thumbs over progressbar

Display thumbnails over progressbar

One of the plugins by Nuevodevel.com is custom thumbnails plugin which allows you to display preview thumbnails over the progress bar when you hover over it with your mouse or keep your finger over the progress bar on touch devices.
The player itself cannot extract thumbnails from video through Jacascript. Nuevo thumbnails plugin makes use of the ready 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 at exactly the same time intervals. To show thumbnails over the progress bar, 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 46 thumbnails, each of 160x90 pixel size, tiled vertically. The video length is relatively short, about 92 seconds, so it's easy to calculate that video thumbnails were extracted per ~2 seconds from the entire video length.
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.