Thumbnails are the little preview images you see when you hover over the progressbar. They are a variant of WebVTT subtitles that can be added using the management interface. There is a separate page on how to add subtitle tracks, and it has a section on thumbnails.
These preview tooltips help navigating longer content for the viewer.
- Knowledge of HTML
- The "Pro" version of the player
When you want to add thumbnails you need to add that to the player URL.
You need to add the
thumbnails GET parameter with in the value the name
of the WebVTT asset containing the thumbails. For example
The first example doesn't have thumbs, the second does.
We use (like others) the WebVTT text track format for thumbnail previews. It consists of timecodes and the URL to an image (and coordinates in the case of sprites) that should be displayed.
Full file can be downloaded here: readysetrocknroll6.vtt
If you want to save bandwidth and speed things up (like we did in the example) you can combine all images in one file. Those combined images are called "sprites".
Here is the sprite used in this example:
In the WebVTT you can reference each image using coordinates:
So the full URL to the image
and the coordinates will instruct our player to display only that part of the sprite.
For these examples we used a modified version of this GitHub repo: github.com/vlanard/videoscripts
Note that the above example by default outputs a slightly incorrect WebVTT, it has an entry above the timecodes. That sould be removed.