Thumbnails


Preview thumbnails are displayed when you hover over the timeline. How to setup:

  1. Create images (thumbnails are stitched together to the collections)
  2. Mark thumbnails in the one layout VTT file
  3. Connect this file to the player

1. Collections

Usually, the collection of thumbnails is a JPEG file with stitched together images 160x90 example from Youtube:

Bonding thumbnails allows you to save resources on requests to the server, but this is not necessary - you can store all frames in separate files.

2. Layout

Time layout is in WebVTT format. Create a text file with any extension (for example, txt)

WEBVTT

00:02.000 --> 00:05.873
//site.com/collection1.jpg#xywh=0,0,160,90

00:05.874 --> 00:07.362
//site.com/collection1.jpg#xywh=160,0,160,90

00:07.363 --> 00:10.399
//site.com/collection1.jpg#xywh=320,0,160,90

Time is specified in HH:MM:SS:MSEC (hours:minutes:seconds.milliseconds). You can remove hours at the beginning for short videos as in the example. Below is a collection URL with the coordinates and size (x, y, width, height) of the each thumbnail. The example above shows the first three frames of the first row of collection.

3. How to connect to the player

Enable thumbnails in the builder Plugins / Thumbnails and pass the parameter thumbnail in the code or playlist:

var player = new Playerjs({"thumbnails":"//site.com/thumbnails.txt"
To load text files from the other domains, please consider cross-domain restrictions.
2018 © Binom LLC

Login

Restore password
Sign up
Log in

Sign up free

Sign up
By signing up, you agree to Terms of Service
Login if you have an account

Restore password

Restore
Forgot email? Contact us