Seek preview & thumbnails

Hover or drag the progress bar and you see the time and a thumbnail of that moment.

Thumbnails from a WebVTT sprite file. Hover the progress bar.

Two sources of thumbnails

Thumbnails file (recommended)
Generated by the player

1
<vega-player src="/video.mp4" thumbnails="/thumbs/video-42/thumbnails.vtt"></vega-player>

The usual WebVTT thumbnails format. They show up instantly. If the file can’t be loaded, the player makes the thumbnails itself.

1
<vega-player src="/video.mp4"></vega-player>

Without a file the player grabs the frames itself. Nothing to prepare, but each new point takes a moment to appear (it downloads a small piece of the video) and it’s a bit heavier on data.

No thumbnails file: frames generated by the player.

All options

Value	Behaviour
(no attribute)	Generated thumbnails on devices with a mouse. On touch devices only the time is shown, to save mobile data.
`thumbnails="/path/file.vtt"`	Thumbnails from the file (generated ones if it fails).
`thumbnails="auto"`	Generated thumbnails on every device, touch included.
`thumbnails="none"`	Time only.

On players narrower than 350px only the time is shown.

The file format

A WebVTT file where each cue’s text is an image, usually a cell of a sprite sheet (one big image with every thumbnail in a grid), addressed with #xywh=x,y,width,height:

1
WEBVTT
2

3
00:00:00.000 --> 00:00:05.000
4
sprite-001.jpg#xywh=0,0,160,90
5

6
00:00:05.000 --> 00:00:10.000
7
sprite-001.jpg#xywh=160,0,160,90
8

9
00:00:10.000 --> 00:00:15.000
10
sprite-001.jpg#xywh=320,0,160,90

Image paths are relative to the .vtt file.
One image per cue (without #xywh) also works.
If the .vtt is on another domain it must be served with CORS headers. The images don’t need them.

Generating the files

generate-thumbnails.sh (requires ffmpeg) creates the sprite sheets and the .vtt for any video:

Run it with the video, an output folder, the seconds between thumbnails and their width:
Terminal window
```
./generate-thumbnails.sh videos/video-42.mp4 public/thumbs/video-42 5 160
```
It creates thumbnails.vtt plus sprite-001.jpg, sprite-002.jpg… (100 thumbnails per sheet).

Point the player at the file:

1
<vega-player src="/videos/video-42.mp4" thumbnails="/thumbs/video-42/thumbnails.vtt"></vega-player>

A 10-minute video with one thumbnail every 5 seconds produces about 120 thumbnails in ~280 KB and takes about 15 seconds to generate. The browser only downloads the sheet for the part of the bar being hovered.