Integrating Thumbnails with Brightcove Web & Smart TV SDK

Overview

The Thumbnails integration allows you to display thumbnail previews as the user hovers or scrubs through the video timeline. This feature enhances the user experience by providing visual cues about different parts of the video.

Prerequisites

• A Brightcove account with access to Video Cloud.

• The Brightcove Web & Smart TV SDK installed in your project.

Usage Example

1. Import the Player (with UI) class from the Brightcove SDK.

   import { Player, IntegrationsManager } from '@brightcove/web-sdk/ui';
               

2. Import the Thumbnails integration class from the Brightcove SDK.

   import { ThumbnailsIntegrationFactory } from '@brightcove/web-sdk/integrations/thumbnails';
               

3. Import the Thumbnails integration CSS from the Brightcove SDK.

   import '@brightcove/web-sdk/integrations/thumbnails/styles';
               

4. Setup Thumbnails integration.

   IntegrationsManager.registerThumbnailsIntegrationFactory(ThumbnailsIntegrationFactory);
               

5. Create the Player.

   const player = new Player({accountId:'<account-id>'});

6. Attach the player to a mount root (DOM element in the page):

   const root = document.querySelector('#player-mount-root');
    player.attach(root);
               

Third-party Thumbnails

Load third-party thumbnails from a remote WebVTT file.

player.addThumbnailTrack({
     src: 'thumbnails.vtt',
     label: 'thumbnails-label',
 });