Progressbar thumbnails

The most popular and most common method for progress bar thumbnails is to load thumbnails VTT file definition and load progressbar thumbnails from a single tiled JPG image.

Preparing tiled thumbnails image manually is almost impossible, and most people use some ready tools for this task. Nuevodevel.com offers such a tool free for download. It requires the ffmpeg tool installed on the server. Just upload the file spritevideo to your server, e.g. to the “/usr/local/bin” directory, and change file permission (0777). Progressbar thumbnails image can be generated only from MP4 or WEBM video. It’s not possible to generate it from HLS or DASH-MPEG video.

The basic bash command you use in the terminal is pretty simple.

/usr/local/bin/spritevideo -i /relative-path-to-video.mp4

This will produce “sprite.vtt” and “sprite.jpg” files in your video directory, ready to declare in the Nuevo shortcode.

You may want to have other filenames than “sprite”. You can declare a custom filename in bash command, e.g.

/usr/local/bin/spritevideo -i /relative-path-to-video.mp4 -f your_filename

You can store VTT and thumbnails image files in any directory, then declare it through the Nuevo shortcode.

[nuevo source="src=/video-playlist-url.m3u8 type=application/x-mpegURL" poster="poster-image-url.jpg" thumbnails="src=vtt-file-url.vtt basepath=/thumbnails-image-directory/" responsive=true"]

The responsive optional parameter makes the thumbnails of different sizes, depending on the player’s width.