# Preview Thumbnails plugin

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

## Installation

Load the `thumbnails` plugin with the player:


```html
<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:

embed
## Example VTT response

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


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


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

## Demo

[codepen](https://codepen.io/team/flowplayer/pen/RXPgWp)

## Links to Sprite and WebVTT tools

embed
## Links to general WebVTT tools and specs

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