サムネイルと Brightcove Web & Smart TV SDK の統合

概要

サムネイル統合では、ユーザーが動画のタイムラインをホバーまたはスクラブすると、サムネイル プレビューを表示できます。 この機能は、動画のさまざまな部分に関する視覚的な手がかりを提供することで、ユーザー体験を向上させます。

Prerequisites

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

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

使用例

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

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

2. Brightcove SDK からサムネイル統合クラスをインポートします。

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

3. Brightcove SDK からサムネイル統合 CSS をインポートします。

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

4. サムネイルの統合を設定します。

   IntegrationsManager.registerThumbnailsIntegrationFactory(ThumbnailsIntegrationFactory);
               

5. プレーヤーの作成

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

6. プレーヤーをマウント ルート（ページ内の DOM 要素）にアタッチします:

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

サードパーティーのサムネイル

リモート WebVTTファイルからサードパーティーのサムネイルを読み込みます。

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