Skip to content
Wowza Flowplayer
/
/
Preview Thumbnails
Last updated

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:

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

Info

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

Previous page
Next page