1. Display
  2. Thumbnail

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:

        WEBVTT

00:00:00.000 --> 00:00:04.629
storyboard.jpg#xywh=0,0,284,160

00:00:04.629 --> 00:00:09.258
storyboard.jpg#xywh=284,0,284,160

...

      

Multiple Images

Sprites should generally be preferred but in the case you only have multiple individual thumbnail images, they can be specified like so:

        WEBVTT

00:00:00.000 --> 00:00:04.629
/media/thumbnail-1.jpg

00:00:04.629 --> 00:00:09.258
/media/thumbnail-2.jpg

...

      

Styling

css
        media-thumbnail {
}

/* Apply styles when thumbnail is loading. */
media-thumbnail[data-loading] {
}

/* Apply styles when thumbnail fails to load. */
media-thumbnail[aria-hidden='true'] {
}

/* Apply styles to underlying img element. */
media-thumbnail [part='img'] {
}

      

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:

css
        media-thumbnail {
  --media-thumbnail-bg: black;
  /* Applies when scaling thumbnails up. */
  --media-thumbnail-min-width: 120px;
  --media-thumbnail-min-height: 80px;
  /* Applies when scaling thumbnails down. */
  --media-thumbnail-max-width: 180px;
  --media-thumbnail-max-height: 160px;
}

      

Tailwind

          
        

Component API

Props

Name Type

time

number

Events

Name Type
Name Description
Name Type
Name Description

Instance Props

Name Type

Instance Methods

Name Type