Preview Thumbnails plugin

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

Installation

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>

Configuration

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

Properties:

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 Sprite and WebVTT tools

• node.js thumbnails
• Video Thumbnails Maker commercial software
• movie thumbnailer
• mt

Links to general WebVTT tools and specs

Specifications and documentation

• WebVTT EduTech wiki
• Video subtitling and WebVTT
• Conversion of 608/708 captions to WebVTT
• Learning center: Media accessibility information, guidelines, and research
• BCP47 language subtag lookup

Validator and converter tools

• Online WebVTT validator
• Javascript validator tool (source code)
• Subtitles tools commercial site
• Desktop SRT converter tool - CLI (source code and Windows, macOS binaries)
• Desktop SRT converter tool - Windows GUI
• Windows subtitle editor (source code)
• EIA-608 to WebVTT Ruby Gem (source code)