Prerequisites

The prerequisite for a VOD playout with thumbnails seeking is the availability of a thumbnail sprite file from MK.IO. You can use the sample and guidelines from Generate thumbnail images and Run VOD processing jobs to generate the sprite file.

A streaming locator suitable for download will also be needed to get a URL to the sprite file. More information in Stream live or VOD assets.

Configuring MKPlayer for playback

Ensure that you've installed the latest version of MKPlayer SDK and follow the Getting Started steps in the player documentation for basic playback.

In step 5 of the Getting Started guide, you configure the source content to use. Enabling thumbnail seeking is as easy as adding thumbnailTrack object to the sourceConfig object with the associated url.

const sourceConfig = {
    title: "Title for your source",
    description: "Brief description of your source",
    poster: "https://my-cdn.com/mysource/poster.png",
    hls: "https://my-cdn.com/mysource/hls/index.m3u8",
    dash: "https://my-cdn.com/mysource/dash/manifest.mpd",
    thumbnailTrack: {
      url: 'https://my-cdn.com/mysource/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt'
    }
};

Once this is done, reloading the source in the player will make the thumbnails available. You can scroll over the time bar and see the thumbnails pop up like in the screenshot below:

Please refer to the player documentation for more details. The thumbnailTrack configuration can be found in the MKThumbnail chapter.