Skip to main content

PrivacyPlayer Preview Thumbnails

What are thumbnails#

thumbnails in action

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.

See thumbnails in action below.

Prerequisites#

  • Knowledge of HTML
  • The "Pro" version of the player

Adding thumbnails to 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 readysetrocknroll6.vtt.

The first example doesn't have thumbs, the second does.

No thumbs:
https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6.smil&type=streaming&service=wowza&output=player&sub=readysetrocknroll6_EN.vtt%2Creadysetrocknroll6_NL.vtt
With thumbs:
https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6.smil&type=streaming&service=wowza&output=player&sub=readysetrocknroll6_EN.vtt%2Creadysetrocknroll6_NL.vtt&thumbnails=readysetrocknroll6.vtt

The format#

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.

WebVTT example#

WEBVTT
00:00:00.000 --> 00:00:22.000
https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6_sprite.jpg&type=download&service=apache&output=download#xywh=0,0,100,56
00:00:22.000 --> 00:01:07.000
https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6_sprite.jpg&type=download&service=apache&output=download#xywh=0,0,100,56
00:01:07.000 --> 00:01:52.000
https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6_sprite.jpg&type=download&service=apache&output=download#xywh=100,0,100,56
00:01:52.000 --> 00:02:37.000
https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6_sprite.jpg&type=download&service=apache&output=download#xywh=200,0,100,56
00:02:37.000 --> 00:03:22.000
https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6_sprite.jpg&type=download&service=apache&output=download#xywh=300,0,100,56
...

Full file can be downloaded here: readysetrocknroll6.vtt

Sprites#

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:

thumbs sprite

In the WebVTT you can reference each image using coordinates: #xywh=300,0,100,56. So the full URL to the image https://rrr.sz.xlcdn.com/?account=jetstreammanual&file=readysetrocknroll6_sprite.jpg&type=download&service=apache&output=download and the coordinates will instruct our player to display only that part of the sprite.

Demo#

Resources#

For these examples we used a modified version of this GitHub repo: github.com/vlanard/videoscripts

info

Note that the above example by default outputs a slightly incorrect WebVTT, it has an entry above the timecodes. That sould be removed.