Skip to main content

How to add thumbnails

Thumbnails are displayed in the video timeline in Accurate.Video to make it easy to navigate the video contents and find relevant parts that are interesting. There are two ways to provide thumbnails in the launch template, by providing single still frames or by providing a sprite map containing multiple thumbnails in a single image file.

Timeline thumbnails

Still Frame​

The simplest way to add thumbnails is to add Still Frames by adding file objects with type STILL_FRAME for each individual thumbnail image.

Still frame example
{
  "type": "STILL_FRAME",
  "url": "https://example.com/thumbnail.001.jpg",
  "metadata": [
    {
      "key": "still_frame:timestamp",
      "value": "27361@24:1"
    }
  ]
}

See Launch Template Format for more details.

Generate thumbnails for still frames​

Here is an example using FFmpeg that creates one thumbnail image every minute:

ffmpeg -i video.mp4 -vf fps=1/60 img%03d.jpg

This example is from the FFmpeg wiki. With that said, there are many ways to generate thumbnail images from a video file, use whichever tool that fits your need.

Sprite Map​

To reduce overhead with image downloads and decode time there is an option to provide multiple thumbnails with a single image file, what we call a Sprite Map, see Launch Template Format for more details.

Sprite Map Thumbnails

If this option is used a Sprite Map Manifest describing the Sprite Map must be provided. The manifest describes the thumbnail dimensions, their location in the sprite map and their timestamp. The manifest can be added as JSON in the launch template:

Example: Sprite Map File in Launch Template with manifest as JSON
{
  "type": "SPRITE_MAP",
  "url": "https://example.com/spritemap.jpg",
  "manifest": {
    "width": 240,
    "height": 135,
    "sprites": [
      {
        "x": 0,
        "y": 0,
        "t": 13152384000
      },
      ...
    ]
  }
}

or be read from a separate url by using Remote JSON References ($ref):

Example: Sprite Map File in Launch Template with manifest via URL
{
  "type": "SPRITE_MAP",
  "url": "https://example.com/spritemap.jpg",
  "manifest": {
    "$ref": "https://example.com/manifest.json"
  }
}

Generate sprite maps and manifests​

Here is an example tool that we've released as open source to help get you going:

AP Media Tools - Thumbnail tools

With that said, there are many ways to generate thumbnail images from a video file, this is just one example of how you could do it, use the tools you prefer.