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.

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)

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.



The Art of Players
2018 © PlayerJS with ♥

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

Order player

Your name
What project do you need a player for?
Email
Phone
Description
Send
You agree to processing of this personal data.

Restore password

Restore
Forgot email? Contact us