html - How to generate video preview thumbnails for use in VideoJS?

Question

I moved over to VideoJs (html5) and need to figure out how to generate thumbnails for the seekbar. I have tried using videojs-thumbnails, however that requires having a preloaded vtt file with a sprite image. I'm trying to figure out a way to automatically load thumbnails for a regular mp4 (h264) file. Flowplayer was able to do this with it's own videos, trying now to figure out how to do it with VideoJs.

I was hoping their was some plugin that I missed that was capable of doing this, but have yet to find it. The best I figured out was to extract the thumbnails from the mp4 file, combine it into a sprite image, and use the #xywh attribute.

If there is no plugin that automatically does this in VideoJS, what command line program can I use to create a VTT file with sprite image on Ubuntu? I am dealing with lots of video files, so doing it manually just isn't feasible.

My video player:

   <div class="video_player_js" style="width:auto; height:auto;">
  <video id="video" class="vjs-16-9 video-js vjs-default-skin vjs-big-play-centered"
    controls preload="auto" width="auto" height="auto"
    data-setup='{"fluid": true}'>
    <source src="test.mp4" type="video/mp4" />
    <track kind="metadata" src="thumbnails.vtt"></track>
    <p class="vjs-no-js">To view this video enabled Javascript.</a></p>
  </video>

Sample vtt file:

WEBVTT

00:00:00.000 --> 00:00:03.000
thumbnails.jpg#xywh=0,0,120,68

00:00:03.000 --> 00:00:06.000
thumbnails.jpg#xywh=120,0,120,68

00:00:06.000 --> 00:00:09.000
thumbnails.jpg#xywh=240,0,120,68

Answer 1

In fact, there IS a VideoJS-based plug-in for displaying thumbnails that was done by BrightCove. See here on GitHub:

https://github.com/brightcove/videojs-thumbnails/blob/master/example.html

The base-poster here seems to favor generating the images in real-time and notes the following:

"The only real issue is that the user has to wait a couple of seconds before the video is ready to be watched."

Unless I'm missing something, it should be preferable and straight-forward to generate the needed VTT-file (of the thumbnail-image info) offline.

EDIT: Choosing to do the extraction offline has the additional advantage that the robust tool 'ffmpeg' seems to be the clear choice. (After evaluating the suggested and immature 'mtn' tool, I rejected it because I could never manage to prevent it from skipping/omitting shots .)

EDIT: BrightCove has nice example code and explanation, including how to do things more efficiently using video 'sprites'. See here: https://support.brightcove.com/display-thumbnail-previews-plugin#Example

EDIT: [I am planning to develop such an example, and will update this answer when I complete that effort...stay tuned.]

EDIT: I finally completed my approach to implementing 'thumbnails' for a video... it is here: https://weasel.firmfriends.us/Private3-BB/