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.

Any assets uploaded after November 21st, 2023 will have thumbnails generated for them. If the asset was uploaded before then, it will need to be re-imported to create thumbnails.

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.

This will always have a hrn of Thumbnails and type of text/vtt.

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.

Since these coincide with a “segment” (roughly every 3 seconds), the index (in the example above, keyframes_0.jpg) can be varied depending on your apps use-case. These can be used to form reliable preview images for an asset.

Getting Started

Guides

References

Upload an asset

Fetch playback info

Download the VTT file

Show a thumbnail

Getting Started

Guides

References

​Upload an asset

​Fetch playback info

​Download the VTT file

​Show a thumbnail

Upload an asset

Fetch playback info

Download the VTT file

Show a thumbnail