title: How to generate video preview thumbnails for use in VideoJS?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>My video player:</p>
  
  <pre><code>   &lt;div class="video_player_js" style="width:auto; height:auto;"&gt;
    &lt;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}'&gt;
      &lt;source src="test.mp4" type="video/mp4" /&gt;
      &lt;track kind="metadata" src="thumbnails.vtt"&gt;&lt;/track&gt;
      &lt;p class="vjs-no-js"&gt;To view this video enabled Javascript.&lt;/a&gt;&lt;/p&gt;
    &lt;/video&gt;
  </code></pre>
  
  <p>Sample vtt file:</p>
  
  <pre><code>WEBVTT
  
  00:00:00.000 --&gt; 00:00:03.000
  thumbnails.jpg#xywh=0,0,120,68
  
  00:00:03.000 --&gt; 00:00:06.000
  thumbnails.jpg#xywh=120,0,120,68
  
  00:00:06.000 --&gt; 00:00:09.000
  thumbnails.jpg#xywh=240,0,120,68
  </code></pre>