Flowplayer · thumbnails plugin

Display thumbnail preview images on the timeline

Compared to a video/canvas based approach this solution has the following advantages:

<head/>

<style>

.flowplayer {
background-color: #000;
background-image: url(//flowplayer.org/media/img/demos/minimalist.jpg);
}
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
.flowplayer {
background-image: url(//flowplayer.org/media/img/demos/minimalist@x2.jpg);
}
}

CSS

<script>

The thumbnails plugin is loaded after the flowplayer script:

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.0.2/flowplayer.min.js"></script>
 
<!-- Flowplayer thumbnails plugin -->
<script src="//releases.flowplayer.org/thumbnails/flowplayer.thumbnails.min.js"></script>

HTML
window.onload = function () {
 
flowplayer("#player", {
ratio: 5/12,
clip: {
// configure thumbnails for this clip
thumbnails: {
template: "//edge.flowplayer.org/bauhaus/thumbs/{time}.jpg",
preload: true
},
 
sources: [
{ type: "video/webm", src: "//edge.flowplayer.org/bauhaus.webm" },
{ type: "video/mp4", src: "//edge.flowplayer.org/bauhaus.mp4" }
]
}
});
 
};

JavaScript

<body/>

<div id="player" class="fp-slim"></div>

HTML