Thumbnails

Adds support for vtt-based thumbnail sprites in the timeline tooltip

Table of contents

Manual Javascript setup

Load the thumbnails plugin with the player.

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

Player and plugins exist in different release versions. Please see the release channel documentation.

OVP managed players

Add the feature in the Plugins section of the OVP player configurator.

Configuration

The plugin is configured in top level configuration under 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:

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

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

Demo

codepen

Links to general WebVTT tools and specs

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

HTML subtitles Video Track selection
Results