Sliders
Slider Thumbnail
This component is used to load and display thumbnail images over the time slider.
Usage
The <media-slider-thumbnail>
component can be used to load/parse preview thumbnails from WebVTT files and display them over the time slider.
The thumbnail image will be displayed when the user is hovering over or dragging the time slider, and the time ranges in the WebVTT file will automatically be matched based on the current pointer position.
WebVTT
The Web Video Text Tracks (WebVTT) format specifies the time ranges of when to display images, with the respective image URL and coordinates (only required if using a sprite).
- The WebVTT file URL can be absolute
https://foo.com/media/thumbnails.vtt
or relative/media/thumbnails.vtt
. - The image URLs specified in the WebVTT file can be absolute
https://foo.com/media/thumbnail-1.jpg
or relative/media/thumbnail-1.jpg
. - The width and height of each thumbnail image should be kept the same. If sizes differ, the aspect ratio should remain the same to avoid jumping when previewing.
Sprite
Sprites are large storyboard images that contain multiple small tiled thumbnails. They're preferred over loading multiple images because:
- Sprites reduce total file size due to compression.
- Avoid loading delays for each thumbnail.
- Reduce the number of server requests.
The WebVTT file must append the coordinates of each thumbnail like so:
Multiple Images
Sprites should generally be preferred but in the case you only have multiple individual thumbnail images, they can be specified like so:
Styling
Tailwind
A more complete slider example is available in the <media-time-slider>
docs.