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/

Answer 2

Surprised I didn't get a single comment/answer. Either way, after taking quite a few days I was able to find a working solution. At first I thought the solution would be using ffmpeg, however while it did work it was drastically slow. I eventually found the linux tool (available in Windows as well) called mtn (Movie Thumbnailer) found here. This tool was able to to create a sprite image from a two hour movie within about 6 seconds. I used the shell_exec function in php with the -v (verbose) option in order to parse out the time of each thumbnail as such:

mtn -v -P -s 60 .jpg file.ext 2>&1

Once there, it was simple logic, parsing, and math to create the necessary WebVTT file. All of this was done in php natively with the exception of having to use mtn with shell_exec.

This solution works great and is pretty accurate. The only real issue is that the user has to wait a couple of seconds before the video is ready to be watched. I am currently looking at options to load the video first, generate the thumbnails in the background, and incorporate it into the video source once ready.

I hope this solution helps anyone else out there that needs to dynamically generate thumbnails for their video player.