Thumbnails#

The Thumbnails component is a custom video.js enhancement that provides visual previews of video content as users interact with the progress bar. When a user hovers over different points in the video timeline, this component displays relevant thumbnail images that correspond to those timestamps. This functionality enables users to quickly navigate to specific scenes within the video, enhancing the overall user experience.

Metadata Requirements:#

The video must include a metadata track with cues formatted according to the standard VTT specifications. Each cue should contain thumbnail information using the #xywh syntax.

Initialization#

The component is already enabled by default, if source has tracks fields. Example of income source:

{
  sources: [
    {
      src: 'https://some.example.net/playlist.m3u8'
    }
  ],
  tracks: [
    {
      src: 'https://some.example.com/thumbs.vtt',
      kind: 'metadata'
    }
  ]
}