Animated Thumbnails (Video Preview)

Learn what animated thumbnails are and how to use them with Brightcove Player and APIs.

What are animated thumbnails?

Animated thumbnails are short, looping video previews extracted from the main video. They replace static images to provide a more engaging browsing experience.

Animated thumbnails:

  • Delivered as one or more HLS manifests
  • Default duration: ~10 seconds
  • Default start time: first frame (customizable)
  • Intended for use in place of static posters/thumbnails in grids, lists, and other preview contexts

Configuring animated thumbnails with your Brightcove Player

To use animated thumbnails with your Brightcove Player, follow these steps:

  1. Navigate to the Players module, and select your player or create a new player.
  2. Set your Player version to 7.37.3 or later.
  3. Add the videoPoster plugin to your player's JSON configuration (see options below).

  4. Click Save
  5. Click Publish

Plugin options

videoPoster plugin options
Option Type Description
playMode string "auto" – autoplay preview on load
"hover" – play preview only on hover
loop boolean true to loop preview, false to play once
delay number Delay in milliseconds before preview starts (helps avoid unintended playback)
playButtonVisible boolean Shows the play button during preview (true) or hides it (false)

Example plugin configuration

{
        "plugins": [
        {
          "name": "videoPoster",
          "options": {
            "playMode": "hover",
            "loop": true,
            "delay": 300,
            "playButtonVisible": true
          },
          "is_packaged": true
        }
      ]
}

Capturing animated thumbnails using the Media Module

To capture an animated thumbnail, follow these steps:

  1. Open the Media Module and select your video.
  2. Put the video scrubber in the frame where you'd like the preview to start and Click Capture.

  3. Choose Video Preview and click Save.

Reviewing animated thumbnails using the API

The video_preview field is available through both the Playback API and the CMS API. This allows you to retrieve and manage animated thumbnail previews programmatically.

Playback API

The video_preview field is returned as a top-level property of videos in the Playback API for the following requests:

Example video_preview (playlist Playback API)

{
    "account_id": "...",
    "id": "...",
    "videos": [
      {
        "account_id": "...",
        "sources": [ "..." ],
        "video_preview": [
          {
            "ext_x_version": "7",
            "src": "http://manifest.prod.boltdns.net/.../preview.m3u8?...",
            "type": "application/x-mpegURL"
          },
          {
            "ext_x_version": "7",
            "src": "https://manifest.prod.boltdns.net/.../preview.m3u8?...",
            "type": "application/x-mpegURL"
          }
        ]
      }
    ]
  }

CMS API

In addition to the Playback API, the video_preview field is also supported in the CMS API for retrieving and updating video previews.

  • GET Video by ID/Reference ID 
    {
    ...
    "video_preview": {
      "start": 10000,
      "sources": [ ... ]  // Same format as Playback API
    }
    ...
  }
  • PATCH Update Video by ID 
    {
    "video_preview": {
      "start": new_value
    }
  }
  • GET Videos in Playlist — the video_preview object is also returned here.