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

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:


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

* [node.js thumbnails](https://www.npmjs.com/package/thumbnails-webvtt)
* [Video Thumbnails Maker](http://www.videonizer-soft.com/downloads.html) commercial software
* [movie thumbnailer](http://moviethumbnail.sourceforge.net/)
* [mt](https://github.com/mutschler/mt)


## Links to general WebVTT tools and specs

#### Specifications and documentation

* [WebVTT EduTech wiki](http://edutechwiki.unige.ch/en/WebVTT)
* [Video subtitling and WebVTT](http://html5doctor.com/video-subtitling-and-webvtt/)
* [Conversion of 608/708 captions to WebVTT](https://dvcs.w3.org/hg/text-tracks/raw-file/default/608toVTT/608toVTT.html)
* [Learning center: Media accessibility information, guidelines, and research](https://dcmp.org/learn/213#CiY_resources)
* [BCP47 language subtag lookup](https://r12a.github.io/app-subtags/)


#### Validator and converter tools

* [Online WebVTT validator](https://quuz.org/webvtt/)
* [Javascript validator tool](https://github.com/annevk/webvtt) (source code)
* [Subtitles tools commercial site](https://subtitletools.com/)
* [Desktop SRT converter tool - CLI](https://github.com/nwoltman/srt-to-vtt-cl) (source code and Windows, macOS binaries)
* [Desktop SRT converter tool - Windows GUI](https://github.com/nwoltman/srt-to-vtt-converter)
* [Windows subtitle editor](https://www.nikse.dk/SubtitleEdit/) (source code)
* [EIA-608 to WebVTT Ruby Gem](https://gitlab.com/pkerling/subconv) (source code)


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