Animated Thumbnails (Video Preview)

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. Open the Players module and select your player or create a new player.
2. Set your Player version to 7.37.3 or later.
3. On the Overview tab, expand the Plugins accordion.
4. In the Plugins section, click the Add Plugin dropdown and select Brightcove Plugin.
5. In the Brightcove Plugin dropdown, select Video Poster.
6. Configure the plugin options as needed (see plugin options below).
7. Click Add.
8. Click Publish Changes to publish your changes.

Plugin options

Example plugin configuration

When you add the videoPoster plugin using the dropdown menu, the following configuration will be applied to your player:

{
        "plugins": [
        {
          "name": "videoPoster",
          "options": {
            "playMode": "hover",
            "loop": true,
            "delay": 300,
            "playButtonVisible": true,
            "previewDuration": 10,
            "initialBandwidth": 3000000,
            "lockRendition": false
          },
          "is_packaged": true
        }
      ]
}
    

Tracking preview interactions with player events

The videoPoster plugin emits two events on the Brightcove Player so you can measure how viewers interact with animated thumbnails — for example, how often a preview is watched and how often it leads to a click into the full video. Because these are standard player events, you can send them to any third-party analytics tool (Mixpanel, Adobe Analytics, Google Analytics, or your own endpoint) without using Brightcove Analytics.

Events

Event properties

Both events include a videoId property. In addition:

End reasons

Listening for the events

Add the listeners to your page alongside the player embed. Replace myAnalytics with the tool you use.

videojs.getPlayer('myPlayerId').ready(function() {
  var player = this;

  player.on('videopreview-start', function(event) {
    myAnalytics.track('preview_started', {
      video: event.videoId,
      mode: event.playMode
    });
  });

  player.on('videopreview-end', function(event) {
    myAnalytics.track('preview_ended', {
      video: event.videoId,
      reason: event.reason,
      seconds: event.secondsViewed
    });

    // Preview-to-play conversion
    if (event.reason === 'click-through') {
      myAnalytics.track('preview_click_through', { video: event.videoId });
    }
  });
});
    

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. Select Video Preview and click Capture.

   

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:

• Get Video by ID/Reference ID
• Get Playlists by ID/Reference ID

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
• GET Videos in Playlist

Example request

https://cms.api.brightcove.com/v1/accounts/<account_id>/videos/<video_id>?include_video_preview=true
    

Example response

{
    ...
    "video_preview": {
      "start": 10000,
      "sources": [ ... ]  // Same format as Playback API
    }
    ...
  }
        

{
    "video_preview": {
      "start": new_value
    }
  }