tkant / flowplayer-thumbnails

Flowplayer thumbnail image plugin

Flowplayer thumbnails plugin

This plugin displays preview thumbnail images on the timeline.

Usage

Live demo at http://demos.flowplayer.org/api/thumbnails.html

Create thumbnails from video

Simple ffmpeg command example:

$ ffmpeg -i bauhaus.mp4 -filter:v framerate=1/1,scale=-1:160 bauhaus%d.jpg

The divisor of the framerate filter value should be the one which is used for the interval option.

To cater for devices with retina display scale height should be 2 times the value of the desired height option.

Especially for longer videos it is recommended to save as much on image file size as possible to save on loading time.

Example command to batch create and optimize thumbnail images:

$ ffmpeg -i bauhaus.mp4 -filter:v framerate=1/1,scale=-1:160 -q:v 5 %d-X.jpg
$ for j in *-X.jpg; do jpegtran -copy none -optimize -outfile ${j%-X.jpg}.jpg $j; done
$ rm *-X.jpg

Configuration

include assets

<script src="//releases.flowplayer.org/6.0.4/flowplayer.min.js"></script>
<script src="//releases.flowplayer.org/thumbnails/flowplayer.thumbnails.min.js"></script>

initialize player

flowplayer('#player', {
  ratio: 0.4167,
  clip: {
    title: 'Bauhaus',
    thumbnails: {
      template: 'thumbnails/bauhaus{time}.jpg'
    },
    sources: [{
      type: 'video/webm',
      src: '//stream.flowplayer.org/bauhaus.webm'
    }, {
      type: 'video/mp4',
      src: '//stream.flowplayer.org/bauhaus.mp4'
    }]
  }
});

Options

Options can be set on the clip, player and global level of the flowplayer configuration with the key thumbnails. This allows common properties to be set on a higher level, e.g., for a playlist height can configured once in the player configuration, leaving only template to be set for each clip.

There's an example in the example/ directory.

option	required	default value	description
template	yes		The path from where to load the thumbnail images. Either a relative or absolute path. Use {time} as a placeholder for seconds.
preload	no	true	If true, then all images will be cached at player initialization to make them appear quicker.
height	no	80	The thumbnail height.
interval	no	1	Seconds between thumbnails. Set this if you want to have more than one second between images.

CommonJS

The plugin can be used in a browserify and/or webpack environment with a commonjs loader:

var flowplayer = require('flowplayer');
require('flowplayer-thumbnails'); // Plugin injects itself into flowplayer

Building the plugin

Build requirement:

• nodejs with npm

cd flowplayer-thumbnails
make deps
make