Get an asset thumbnail

For video assets we provide a way to retrieve a list of thumbnails for your video assets. Thumbnails will be generated as part of the asset processing, with each “segment” (which is roughly every 3 seconds) of video resulting in one image.

Follow the steps below to find out how to use this.

​

Upload an asset

Follow our previous guide on uploading an asset and get the playbackId.

​

Fetch playback info

Once the processing has completed for your asset, fetch the playback info using the playback info API endpoint.

Example response:

{
  "type": "vod",
  "meta": {
    "playbackPolicy": null,
    "source": [
      {
        "hrn": "HLS (TS)",
        "type": "html5/application/vnd.apple.mpegurl",
        "url": "https://vod-cdn.lp-playback.studio/raw/jxf4iblf6wlsyor6526t4tcmtmqa/catalyst-vod-com/hls/95c9ih1y6tl97xbx/index.m3u8"
      },
      {
        "hrn": "Thumbnails",
        "type": "text/vtt",
        "url": "https://vod-cdn.lp-playback.studio/raw/jxf4iblf6wlsyor6526t4tcmtmqa/catalyst-vod-com/hls/95c9ih1y6tl97xbx/thumbnails/thumbnails.vtt"
      }
    ]
  }
}

You should see an entry in the source array with the type text/vtt. This file uses the WebVTT format to represent the thumbnails associated with each time point in the video.

This format was chosen with the use case of thumbnail scrubbing in mind, to allow a player to overlay thumbnail images as the user is seeking through a video, but it allows more general usage of selecting a desired time in your video and fetching a thumbnail for it.

​

Download the VTT file

Fetch the VTT file from the URL above.

WEBVTT
00:00:00.000 --> 00:00:10.000
keyframes_0.jpg

00:00:10.000 --> 00:00:20.000
keyframes_1.jpg

00:00:20.000 --> 00:00:29.000
keyframes_2.jpg

​

Show a thumbnail

Use one of the JPG paths to download a thumbnail. As an example if your VTT URL is:

https://vod-cdn.lp-playback.studio/catalyst-vod-com/hls/ac906f1cs0oe9rb1/thumbnails/thumbnails.vtt

You can get the first frame of the video from:

https://vod-cdn.lp-playback.studio/catalyst-vod-com/hls/ac906f1cs0oe9rb1/thumbnails/keyframes_0.jpg

This is a pattern that can be used for any asset to get a preview thumbnail.