Support VTT sprite for thumbnail

[nadecancode]

For example: https://preview.zorores.com/4b/4b1a02c7ffcad4f1ee11cd6f474548cb/thumbnails/sprite.vtt

There's a videojs plugin for such implementation: https://github.com/chrisboustead/videojs-vtt-thumbnails/blob/master/src/plugin.js

[phpb-com]

Tool to generate the files and VTT: https://github.com/binoy638/sprite-vtt-generator

[shiyiya]

Done.

https://github.com/shiyiya/oplayer/commit/a96245d8f6c5f3daa28e3f9504c11bbf04922e36

[phpb-com]

Wow, that was fast. I just left one comment about the URL that you have in the code for the CSS background. It seems to be out of place.

[shiyiya]

Wow, that was fast. I just left one comment about the URL that you have in the code for the CSS background. It seems to be out of place.

fixed

[phpb-com]

Is this deployed to your main playground already? I just tried it, and no joy

[phpb-com]

I would also suggest to use "base" of the VTT file as the base for the images, instead of default to nothing. Normally you would see images co-located with the vtt file.

[phpb-com]

WEBVTT

00:00:00.000 --> 00:00:20.000
thumb1.jpg

00:00:20.000 --> 00:00:40.000
thumb2.jpg

00:00:40.000 --> 00:01:00.000
thumb3.jpg

00:01:00.000 --> 00:01:20.000
thumb4.jpg

00:01:20.000 --> 00:01:40.000
thumb5.jpg

00:01:40.000 --> 00:02:00.000
thumb6.jpg

00:02:00.000 --> 00:02:20.000
thumb7.jpg

00:02:20.000 --> 00:02:40.000
thumb8.jpg

00:02:40.000 --> 00:03:00.000
thumb9.jpg

00:03:00.000 --> 00:03:10.000
thumb10.jpg

Is also one common standard that you will find on the internet. Just an FYI

[shiyiya]

For example: https://preview.zorores.com/4b/4b1a02c7ffcad4f1ee11cd6f474548cb/thumbnails/sprite.vtt

work on it

[shiyiya]

I would also suggest to use "base" of the VTT file as the base for the images, instead of default to nothing. Normally you would see images co-located with the vtt file.

now, no base

[shiyiya]

https://oplayer.vercel.app/playground?code=import%20Player,%20%7B%20isMobile,%20isiPad,%20isiPhone,%20isIOS%20%7D%20from%20%27/core.es.js%27%0Aimport%20ui%20from%20%27/ui.es.js%27%0Aimport%20danmaku%20from%20%27/danmaku.es.js%27%0Aimport%20hls%20from%20%27/hls.es.js%27%0Aimport%20dash%20from%20%27/dash.es.js%27%0A%0APlayer.make(document.getElementById(%27oplayer%27),%20%7B%0A%20%20source:%20%7B%0A%20%20%20%20src:%20%27https://oplayer.vercel.app/%E5%90%9B%E3%81%AE%E5%90%8D%E3%81%AF.mp4%27,%0A%20%20%20%20poster:%20%27https://oplayer.vercel.app/poster.png%27%0A%20%20%7D%0A%7D)%0A%20%20.use(%5B%0A%20%20%20%20ui(%7B%0A%20%20%20%20%20%20thumbnails:%20%7B%0A%20%20%20%20%20%20%20%20src:%20%27https://preview.zorores.com/4b/4b1a02c7ffcad4f1ee11cd6f474548cb/thumbnails/sprite.vtt%27,%0A%20%20%20%20%20%20%20%20isVTT:%20true,%0A%20%20%20%20%20%20%20%20number:%20100%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%20%20%5D)%0A%20%20.create()%0A

[shiyiya]

done