Using VTT file for thumbnails

PooriaFarhad commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

is it possible to use them for current plugin?

tjenkinson commented 8 years ago

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 commented 8 years ago

are you going to add it?

PooriaFarhad commented 8 years ago

hmmm?

tjenkinson commented 8 years ago

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

tjenkinson / clappr-thumbnails-plugin

Using VTT file for thumbnails #12