Display
Thumbnail
This component is used to load and display thumbnail images.
Usage
The <media-thumbnail>
component can be used to load and display preview thumbnails from WebVTT files that are configured on the player.
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
CSS Variables
The following snippet contains a complete list of CSS variables and their default values. Any of the variables can be set to adjust the default thumbnail styles:
Tailwind
Component API
Props
Name | Type |
---|---|
|
number
|
Events
Name | Type |
---|
Name | Description |
---|
CSS VarsLearn more about cssVars
Name | Type |
---|
CSS PartsLearn more about cssParts
Name | Description |
---|
Instance Props
Name | Type |
---|
Instance Methods
Name | Type |
---|