vidstack / player

UI components and hooks for building video/audio players on the web. Robust, customizable, and accessible. Modern alternative to JW Player and Video.js.
https://vidstack.io
MIT License
1.89k stars 114 forks source link

Multiple `ThumbnailStoryboard` #1310

Closed bruecksen closed 2 weeks ago

bruecksen commented 3 weeks ago

Related Problem:

I can't programmatically set the thumbnails if I have multiple sprite images. This only works if I have an endpoint returning a vtt file. But I would like to be able to programmatically add thumbnails based on multiple sprite files.

Describe:

It should be allowed to set thumbnails to an array of ThumbnailStoryboard objects. So that every ThumbnailStoryboard object could point to a different sprite image.

Curetix commented 2 weeks ago

You can use the JSON format as shown in the docs:

[
  { "startTime": 0, "endTime": 5, "url": "/media/thumbnail-1.jpg" },
  { "startTime": 5, "endTime": 10, "url": "/media/thumbnail-2.jpg" }
]

Or with coordinates like a VTT:

[
  { "startTime": 0, "endTime": 5, "url": "/media/thumbnail-1.jpg#xywh=0,0,284,160" },
  { "startTime": 5, "endTime": 10, "url": "/media/thumbnail-1.jpgxywh=284,0,284,160" }
  // ...
  { "startTime": 100, "endTime": 105, "url": "/media/thumbnail-2.jpgxywh=0,0,284,160" }
]

And then pass it as an object to the layout as you would the storybook format.

bruecksen commented 2 weeks ago

@Curetix thank you!