Thumbnails

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/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/thumbnails.min.js"></script>

Configuration

The plugin is configured in top level configuration under thumbnails namespace.

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
• Videohop online generator
• mt