EndScreen と Brightcove ウェブ & スマートTV SDK の統合

概要

EndScreen の統合により、開発者は動画プレーヤーにカスタマイズ可能な終了画面を追加できます。 これには、ソーシャル共有終了画面またはカスタム終了画面を含めることができます。 ソーシャル エンドスクリーン機能は、ビデオの再生が終わると、視聴者がさまざまなソーシャルメディア プラットフォームでビデオを簡単に共有できるようにすることで、視聴者のエンゲージメントを高めます。 Custom EndScreen機能により、開発者は特定のコンテンツでカスタマイズされたエンド画面を作成することができます。

前提条件

• Video Cloud にアクセスできる Brightcove アカウントを持っていること。

• プロジェクトにインストールされている Brightcove ウェブ & スマートTV SDK。

使用例

1. Brightcove SDK から Player (with UI) クラスのインポート。

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

2. 必要な EndScreen 統合クラス（カスタムまたはソーシャル）のインポート。

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

3. 必要な EndScreen統合CSS（カスタムまたはソーシャル）のインポート。

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

4. 選択した EndScreen 統合ファクトリーを統合マネージャに登録します。

   IntegrationsManager.registerEndScreenIntegrationFactory(CustomEndScreenIntegrationFactory);
               

   または

   IntegrationsManager.registerEndScreenIntegrationFactory(SocialEndScreenIntegrationFactory);
               

5. プレーヤーの作成と設定

   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. プレーヤーをマウント ルート（ページ内の DOM 要素）にアタッチします:

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

カスタム設定の概要

このセクションでは、ウェブ & スマートTV SDKを使用する際にカスタム EndScreenで利用可能な設定オプションに関する詳細情報を提供します。

ソーシャル設定の概要

このセクションでは、ウェブ & スマートTV SDKを使用する際にソーシャル共有統合で利用可能な様々な設定オプションに関する詳細情報を提供します。