Using VTT file for thumbnails

[PooriaFarhad]

It could be great to use VTT file as source of thumbnails.
VTT sample file:
http://vedas.ir/thumbnails.vtt

and also a better choice could be sprite sheet:
http://vedas.ir/thumbnails-sheet.vtt
http://vedas.ir/thumbnails.jpg

Hmmm?

Thanks

[leandromoreira]

For those that don't want to download the file, here it is:

WEBVTT

00:00:00.000 --> 00:00:10.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0001.jpg

00:00:10.000 --> 00:00:20.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0002.jpg

00:00:20.000 --> 00:00:30.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0003.jpg

00:00:30.000 --> 00:00:40.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0004.jpg

00:00:40.000 --> 00:00:50.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0005.jpg

00:00:50.000 --> 00:01:00.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0006.jpg

00:01:00.000 --> 00:01:10.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0007.jpg

00:01:10.000 --> 00:01:20.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0008.jpg

00:01:20.000 --> 00:01:30.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0009.jpg

00:01:30.000 --> 00:01:40.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0010.jpg

00:01:40.000 --> 00:01:50.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0011.jpg

00:01:50.000 --> 00:02:00.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0012.jpg

00:02:00.000 --> 00:02:10.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0013.jpg

00:02:10.000 --> 00:02:20.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0014.jpg

00:02:20.000 --> 00:02:30.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0015.jpg

00:02:30.000 --> 00:02:40.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0016.jpg

00:02:40.000 --> 00:02:50.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0017.jpg

00:02:50.000 --> 00:03:00.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0018.jpg

00:03:00.000 --> 00:03:10.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0019.jpg

00:03:10.000 --> 00:03:20.000
thumbnails/g5yulblomzgq3teclzctcaif2xabo2feis3eevoo_720-0020.jpg

[PooriaFarhad]

is it possible to use them for current plugin?

[tjenkinson]

Hi @PooriaFarhad VTT's are not currently supported but sprite sheets are.

To use your sprite sheet you would do this:

var numThumbs = 20;
var thumbWidth = 120;
var thumbHeight = 68;
var numColumns = 10;
var timeInterval = 5; // TODO change this to your value

var thumbsConfig = ClapprThumbnailsPlugin.buildSpriteConfig("http://vedas.ir/thumbnails.jpg", numThumbs, thumbWidth, thumbHeight, numColumns, timeInterval);

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  plugins: {
    core: [ClapprThumbnailsPlugin]
  },
  scrubThumbnails: {
    backdropHeight: 64,
    spotlightHeight: 84,
    thumbs: thumbsConfig
  }
});

[PooriaFarhad]

are you going to add it?

[PooriaFarhad]

hmmm?

[tjenkinson]

Sorry I'm really busy at the moment. It sounds like nice feature and possible at the moment if you parse the file yourself to generate the config from. This looks like it should be able to parse a vtt on the common browsers: https://github.com/mozilla/vtt.js