Thumbnail Seeking with Brightcove Player

Overview

Video thumbnail images allow users to quickly scan the progress bar for the section they are interested in. Brightcove Player displays thumbnail images when the user hovers over the progress bar. Clicking on the progress bar takes them to that location in the video.

When are images generated?

Brightcove generates the images dynamically on request. Any video ingested with Dynamic Delivery will have images generated on the first request. This ensures that images are not created for unused videos. Once generated, images are cached locally and on the CDN for repeat viewing, just like any other image.

What is the image frequency for a video?

The thumbnails list is filtered down based on the pixel width of the player at initialization. This list varies significantly depending on player styling, window sizing, platform/device, etc. The thumbnail plugin aims to show a new thumbnail roughly every 30px as the user hovers over the progress bar. For example, if the player is 1,500px wide, the player will attempt to filter the list down to 50 thumbnails. The remaining time intervals for the WebVTT cues are adjusted according to the content’s duration.

Requirements

The following requirements apply to the thumbnail plugin:

You must use a Brightcove Player version 6.41.0 or later (latest version 7 release recommended)
Videos must be ingested for Dynamic Delivery
For server-side ad insertion (SSAI), you must use the videojs-ssai plugin version 1.10.0+

Player example

Click on the example below, and hover along the progress bar to see preview thumbnails.

See the Pen Thumbnails plugin by Brightcove Learning Services (@bcls1969) on CodePen.

Source code

You can view the source code by selecting the HTML button in the CodePen above, or you can view the complete solution on GitHub.

Getting started

This feature is available to anyone with a Brightcove Video Cloud account.

Make sure your videos are ingested for Dynamic Delivery.

Implementing thumbnails using Studio

The easiest way to configure your player for thumbnail seeking is with Video Cloud Studio.

Open the PLAYERS module. Use an existing player or create a new one.
Select the player link to open the player's properties.
In the left navigation, select Controls.
Check Thumbnail Seeking.

Brightcove plugin
To publish the player, select Publish & Embed > Publish Changes

Publish Changes
The thumbnails plugin is now configured for your player.

Use a video ingested for Dynamic Delivery and publish it with the player we configured in the steps above. You should see thumbnail images when you hover over the player's progress bar.

Implementing WebVTT thumbnails

If you choose to use your own thumbnail images, you can create a custom WebVTT file and pass it to the player using the player.addRemoteTextTrack() method. Here are the steps:

Create a .vtt file that follows the standard WebVTT format. Replace caption text with the URL for each thumbnail image. It may look something like this:

WebVTT file
In Video Cloud Studio, choose a video ingested for Dynamic Delivery. Copy the Advanced Embed code for a player.
In the HTML file for your web page, paste the Advanced Embed code.

In the head section of your HTML code add the thumbnails CSS file:

//players.brightcove.net/videojs-thumbnails/videojs-thumbnails.css

In the body section of your HTML code add the thumbnails JavaScript file:
```
//players.brightcove.net/videojs-thumbnails/videojs-thumbnails.js
```
To the video tag, add an id property.
Before the closing body tag, add a script block.

In the script block you just created, add the following:

Property	Value
`type`	The mime-type for your video
`src`	The source URL for your video

Your code should be similar to this:

var player = bc('myPlayerID');

player.thumbnails();

player.ready(() => {
  player.src({
    type: 'video/mp4',
    src: '//solutions.brightcove.com/bcls/videos/Great Blue Heron.mp4'
  });
});

In the same script block, add the following:

After the plugin is initialized and the player is ready, you will pass thumbnail image sources to the plugin in a WebVTT file using the addRemoteTextTrack() method. When calling the method with the thumbnail file, you must also set:

Property	Value
`src`	The location of your WebVTT file with thumbnail images
`kind`	Set to `metadata`
`label`	Set to `thumbnails`
`mode`	Set to `hidden`
`addRemoteTextTrack()` `manualCleanup`	Set to `false` so that the track is automatically removed when the source changes

Your code should be similar to this:

var player = bc('myPlayerID');

player.thumbnails();

  player.ready(() => {
    player.src({
      type: 'video/mp4',
      src: '//solutions.brightcove.com/bcls/videos/Great Blue Heron.mp4'
    });

  player.addRemoteTextTrack({
    src: 'thumbnails.vtt',
    kind: 'metadata',
    label: 'thumbnails',
    mode: 'hidden'
  }, false);
});

Source code

For details, see the complete solution on GitHub.

Changelog

See the Thumbnails Plugin Release Notes.

For historical release notes, see the changelog here.