Generate all the files (.vtt + sprite) for the Tooltip Thumbnails options of Jwplayer

I wrote a script to do this task. Given a video file (MP4 or M4v), generate thumbnail images, compress into a sprite, and generate a VTT file compatible with JWPlayer tooltip thumbnails. All of the image manipulation uses tools from ffmpeg, ImageMagick, and optionally sips and optipng. The WebVTT generation part, I had to write.

You will have to install ffmpeg & imagemagick, at a minimum to use this.

Github code is here: https://github.com/vlanard/videoscripts (under sprites/).

The basic gist is:

1. Create a bunch of thumbnails, e.g. every 45th second from a video

   ffmpeg -i ../archive/myvideofile.mp4 -f image2 -bt 20M -vf fps=1/45 thumbs/myvideofile/tv%03d.png 
   

2. Resize those thumbnails to be small, e.g. 100pixels wide

   sips --resampleWidth 100 thumbs/myvideofile/tv001.png thumbs/myvideofile/tv002.png thumbs/myvideofile/tv003.png
   

   OR if sips not available, use imageMagick utility:

   mogrify -geometry 100x thumbs/myvideofile/tv001.png thumbs/myvideofile/tv002.png thumbs/myvideofile/tv003.png
   

3. Get the height & width dimensions of one of the thumbnails to use as the basis of our grid coordinates, using ImageMagick utility

   identify -format "%g - %f" thumbs/myvideofile/tv001.png 
   

   which returns output like : 100x55+0+0 - tv001.png

   from which we parse 100 and 55 as our Width & Height, and the general geometry of each thumbnail (W, H, X, Y)

4. We then generate our single spritemap from the individual thumbnails. We determine the target grid size (e.g. 2x2, 8x8) to suit the number of thumbnails we generated for this video, as well as passing in the sprite geometry, using an ImageMagick utility

   montage thumbs/myvideofile/tv*.png -tile 2x2 -geometry 100x55+0+0 thumbs/myvideofile/myvideofile_sprite.png
   

5. Optionally we can run an extra compression step here to make the sprite smaller

   optipng thumbs/myvideofile/myvideofile_sprite.png
   

6. We then generate a VTT file based on the number of thumbnails we created, using the interval that we used to space out the thumbnails to label each time segment, and using the known coordinates of each consecutive image within our sprite that maps to the associated segment.

I made a free web app to do this: https://www.videohop.com.au/thumbnail-generator

Drag in a video file, and it'll give you a zip file containing thumbnail sprites + VTT file(s). Supports multiple quality sets. (E.g., 60p + 180p.)

Option 1 :

You can use the encoding.com's API and tell them to export vtt file too

I recommend to read "How can I create time synced thumbnails for use in JW player?" explanation from encoding.com's Knowledge base

Option 2 :

use movie thumbnailer (mtn), this is a command line tools running on UNIX, Windows systems. But you will have to write a custom script to generate the VTT file corresponding

• Super fast! Thanks to FFmpeg's libavcodec.
• Command line program: canbe used on remote connections to co-location servers, or used in scripts.
• Batch mode: recursively search directories for movie files. Run at lower priority (nice 10 on Linux, idle on Windows) by default. To run at normal priority use -n option.
• Thumbnails are group together in one jpeg file and can be saved individually too (-I option).
• Work fine with Unicode filenames in both Linux & Windows (might need to change the font with -f fontfile).