Thumbnails Generation

Thumbnails are preview images that help users navigate through video content by providing visual cues. They are supported for DASH and HLS formats. You can see them when scrolling video forward or backwards, just as you see it on YouTube, for example.

Thumbnail Settings

You can specify the thumbnail settings as below. These settings are used in the Image Extraction Phase

{
    "Thumbnails": {
        "Generate": true,
        "Width": 64,
        "Height": 64,
        "DurationInSeconds": 5
    }
}

Property	Description	Additional Info	Required?
Generate	Use generation or not. Supported values: true, false.	-	Yes.
Width	Desired thumbnail image width in pixels.	Must be between 24 and 7680 (including). If the value is not set, it will be automatically calculated using the height to maintain the aspect ratio.	No.
Height	Desired thumbnail image height in pixels.	Must be between 24 and 4320 (including). If the value is not set, it will be automatically calculated using the height to maintain the aspect ratio. NOTE: If neither Width nor Height are specified, Thumbnails will be generated using defaults (384x216)	No.
DurationInSeconds	Time between the indivudal thumbnails	For example, if you have a 60-second video and 5 seconds for the thumbnail duration, there will be 12 thumbnails in total. If the value is not set, it will be automatically calculated according to duration of the video. - If duration is less than 1 min: 2 seconds - If durations is between 1 min and 30 min: 5 seconds - If duration is more than 30 min: 10 seconds	No.

DASH Support

Thumbnails are supported by the DASH spec (check DASH IF IOP v4.3 spec and, in particular, the paragraph 6.2.6 Tiles of thumbnail images).

HLS Support

Thumbnails are configured separately using WebVTT playlists. You can configure the VTT file location in your player to view thumbnails.

By default, the thumbnails.vtt file will be saved in the /hls/thumbnails/ directory.

See the example below on how to configure thumbnails VTT location in Shaka Player.

    const player = new shaka.Player(videoElement);

    async function loadStream() {
        try {
            await player.load('https://example.com/sample-resource/manifest.m3u8'); // Replace with your HLS Manifest URL

            // Add the VTT thumbnails track
            player.addThumbnailsTrack('https://example.com/sample-resource/hls/thumbnails/thumbnails.vtt'); // Replace with your VTT file URL
        } catch (error) {
            console.error('Error loading stream:', error);
        }
    }
    loadStream();