Thumbnails

This plugin adds support for vtt-based thumbnail sprites in the timeline tooltip.

Installation

Load the thumbnails plugin with the player:

Copy
Copied
<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/thumbnails.min.js"></script>

Configuration

The plugin is configured in top level configuration under the thumbnails namespace. The following properties are available:

Properties:

option description example
src string the location to fetch the VTT formatted thumbnails from https://thumbnails.bucket.example.com/video/121231.vtt

Example VTT response

The VTT files must be configured in the form of sprite-based thumbnails:

Copy
Copied
WEBVTT

00:00:00.000 --> 00:00:02.000
thumbnails.jpg#xywh=0,0,120,67

00:00:02.000 --> 00:00:04.000
thumbnails.jpg#xywh=120,0,120,67

00:00:04.000 --> 00:00:06.000
thumbnails.jpg#xywh=240,0,120,67

00:00:06.000 --> 00:00:08.000
thumbnails.jpg#xywh=360,0,120,67

00:00:08.000 --> 00:00:10.000
thumbnails.jpg#xywh=0,67,120,67

00:00:10.000 --> 00:00:12.000
thumbnails.jpg#xywh=120,67,120,67

This ensures the maximum responsiveness from the thumbnail tooltip by drastically reducing the number of HTTP requests that are required to show thumbnails.

Sample code

Copy
Copied
var api = flowplayer('#container',
  { src        : "//edge.flowplayer.org/bauhaus.mp4"
  , title      : "Bauhaus"
  , thumbnails : {src: "https://flowplayer.com/thumbnails.vtt"}
  })

Demo

codepen

Links to Sprite and WebVTT tools

Links to general WebVTT tools and specs

Specifications and documentation

Validator and converter tools

Info

These links are provided without any guarantee for functionality or security of the linked apps.