Integrating EndScreen with Brightcove Web & Smart TV SDK

Overview

The EndScreen integration allows developers to add a customizable end screen to their video player. This can include either a social sharing end screen or a custom end screen. The Social EndScreen feature enhances viewer engagement by allowing viewers to easily share the video on various social media platforms once the video has finished playing. The Custom EndScreen feature allows developers to create a tailored end screen with specific content.

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 required EndScreen integration classes (Custom or Social).

   import { CustomEndScreenIntegrationFactory } from '@brightcove/web-sdk/integrations/customEndScreen';
    import { SocialEndScreenIntegrationFactory } from '@brightcove/web-sdk/integrations/socialEndScreen';
               

3. Import the desired EndScreen integration CSS (Custom or Social).

   import '@brightcove/web-sdk/integrations/customEndScreen/styles';
    import '@brightcove/web-sdk/integrations/socialEndScreen/styles';
               

4. Register the chosen EndScreen Integration Factory with the Integrations Manager.

   IntegrationsManager.registerEndScreenIntegrationFactory(CustomEndScreenIntegrationFactory);
               

   or

   IntegrationsManager.registerEndScreenIntegrationFactory(SocialEndScreenIntegrationFactory);
               

5. Create and Configure the Player.

   const player = new Player({ accountId: '<your-account-id>' });
   
    player.updateConfiguration({
        integrations: {
            endScreen: {
    // Configuration for Custom EndScreen
                custom: {
                    content: '<strong>Content</strong> for <em>custom</em> end screen',
                },
    // Configuration for Social EndScreen
                social: {
                   title: 'Social Endscreen Title',
                   description: 'Social Endscreen description',
                   services: {
                       facebook: true,
                       twitter: true,
                       tumblr: false,
                       pinterest: false,
                       linkedin: false
                   },
               },
            },
        },
    });
               

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

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

Custom Configuration Summary

This section provides detailed information about the configuration options available for Custom EndScreen when using the Web & Smart TV SDK.

Social Configuration Summary

This section provides detailed information about the various configuration options available for Social Sharing Integration when using the Web & Smart TV SDK.