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. You can also use single frame mp4 instead of jpg.

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 thumbnails 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.

How often do thumbnails

It depends on the length of the video.

• 2 seconds (less than 2 minutes)
• 5 seconds (2 to 10 minutes)
• 10 seconds (10 to 30 minutes)
• 20 seconds (30 to 60 minutes)
• 30 seconds (more than 60 minutes)

Styles

You can configure thumbnail styles in the builder. But if you need direct access via CSS, then from version 12.12 you can get it by id pjs_thumbnail_[id]

[id] - this is the id of the player container. Let's say the player is located in the player container, then the thumbnail block id will be called pjs_thumbnail_player (the img tag with the image is located inside this block).

Creating a collection of frames using FFmpeg

A typical FFmpeg request for creating a collection of pictures from MP4

ffmpeg -i "input.mp4" -vsync vfr -vf "select=isnan(prev_selected_t)+gte(t-prev_selected_t\,5),scale=160:90,tile=5x5" -qscale:v 3 "output%03d.jpg"

• 5 save frame every 5 seconds
• 160:90 in the collection there will be pictures 160 x 90 pixels (for video with the aspect ratio 16x9), folded into a mosaic of 5x5
• 3 image quality and weight (the smaller, the better the quality and more weight)
• output%03d.jpg collections of pictures are generated with a three-digit number output001.jpg, output002.jpg.

Try this PHP script for creating images and a markup file.

PHP

Download script

Tested with FFmpeg 4.0

This is an example script that creates frame thumbnails from a video and generates a markup file.

It requires the FFmpeg and FFprobe libraries (you need to setup the paths to binary files if they are not installed). Other configured parameters:

• the width of the thumbnails (default is 160 px), the height is calculated automatically
• mosaic size (default 5x5)
• URL and name of the folder for images

To start you need to specify two variables - file (video) and output (markup, which will be generated in the end)

thumbnails.php?file=video.mp4&output=video.vtt

The script will create collections of images at the desired interval and generate a markup file in WebVTT format.

---