Brightcove ウェブ & スマートTV SDK の使用開始

このセクションでは、Brightcove ウェブ & スマートTV SDK をセットアップして使い始めるために必要な初期手順について説明します。

SDKのインストール

Brightcove ウェブ & スマートTV SDK は、npm を使用して、または Brightcove CDN から直接インストールすることが出来ます。

npmの使用:

コマンドラインインターフェイスを開き、以下のコマンドを実行してSDKをインストールします:

npm install @brightcove/web-sdk

インストール後、お好みのモジュールシステムを使用してSDKをインポートすることが出来ます:

CommonJS

const { Player } = require('@brightcove/web-sdk');

ES Module

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

CDNの使用

または、CDNからSDKを使用したい場合は、HTMLファイルに以下のスクリプトタグのいずれかを含めます:

CommonJS

<script src="https://players.brightcove.net/sdk/v1/web-sdk/playback/index.cjs.js"></script>

ES Module

<script type="module" src="https://players.brightcove.net/sdk/v1/web-sdk/playback/index.es.js"></script>

IIFE (Immediately Invoked Function Expression)

<script src="https://players.brightcove.net/sdk/v1/web-sdk/playback/index.iife.min.js"></script>

バージョンの指定

CDN URLでバージョンを指定するには:

メジャーバージョンに最新のパッチを含めるには v{major} を使用します。
v{major}.{minor} を使用すると、マイナーバージョンに最新のパッチを含めることができます。
特定のバージョンを含めるには v{major}.{minor}.{patch} を使用します。

例


<script src="https://players.brightcove.net/sdk/v1/web-sdk/playback/index.iife.min.js"></script>
 <script src="https://players.brightcove.net/sdk/v1.1/web-sdk/playback/index.iife.min.js"></script>
 <script src="https://players.brightcove.net/sdk/v1.1.1/web-sdk/playback/index.iife.min.js"></script>

プレーヤーのインポート

再生のみ

再生機能のみを必要とし、追加のUI機能を必要としないアプリケーションの場合:

import { Player } from '@brightcove/web-sdk/playback';

UIによる再生

UIとともに再生機能を必要とするアプリケーションでは、以下のプレーヤーエントリポイントを使用します:

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

プレーヤーの初期化

SDK をインストールしたら、アプリケーションに埋め込むメディアプレーヤーを作成できます。以下の手順に従って、Brightcove ウェブ & スマートTV SDK を使用して基本的な動画プレーヤーをセットアップします。

プレーヤーの初期化: Brightcove アカウントの詳細でプレーヤーをセットアップします:

const player = new Player({
  // Account ID parameter is required to initialize a player
  accountId: '<ACCOUNT_ID>',
 });

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

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

プレーヤー設定のパラメータを動的に更新します:

player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>'
  },
  ui: {
    language: 'en',
    playsinline: false
  }
});

メディアの読み込み

Video Cloud VOD

以下の手順でメディアをプロジェクトにロードします:

プレーヤーの初期化: プレーヤーの新しいインスタンスを作成します。

const player = new Player({accountId: '<ACCOUNT_ID>'});

player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>'
  },
});

ビデオを読み込む関数の作成: 動画IDを使用してビデオメタデータをロードする非同期関数を定義します。

async function loadVideo(videoId) {
// you can abort a request by calling abort()
    const { abort, promise } = player.getVideoByIdFromPlaybackApi({ videoId: '<VIDEO_ID>' });

    try {
        let brightcoveVideoModel = await promise;

        player.loadBrightcoveVideoModel(brightcoveVideoModel);
    } catch (error) {
        console.error('Error loading video:', error);
    }
}

特定の動画 ID を指定して loadVideo 関数を呼び出し、動画をプレーヤーにロードします。
```
loadVideo('<VIDEO_ID>');
```

Video Cloud プレイリスト

以下の手順に従って、プレイリストをプロジェクトに統合してください:

プレーヤーの初期化: プレーヤーの新しいインスタンスを作成します。

const player = new Player({accountId: '<ACCOUNT_ID>'});

player.updateConfiguration({
  brightcove: {
    policyKey: '<POLICY_KEY>'
  },
});

プレイリストをロードする関数の作成: プレイリストIDを使用してプレイリストをロードする非同期関数を定義します。

async function loadPlaylist(playlistId) {
// you can abort request by calling abort()
    const { abort, promise } = player.getPlaylistByIdFromPlaybackApi({ playlistId });

    try {
        const playlistModel = await promise;
        const playlistManager = player.getPlaylistManager();

        // Create playlist object
        const playlist = playlistManager.createPlaylistFromBrightcoveVideoModels(playlistModel.videos);

        // Pass the playlist object to the PlaylistManager
        playlistManager.setPlaylist(playlist);

        // Load the first playlist item
        player.loadBrightcoveVideoModel(playlist.getCurrentItem());
    } catch (error) {
        console.error('Error loading playlist:', error);
    }
}

特定のプレイリストIDで loadPlaylist 関数を呼び出し、プレイリストをプレーヤーにロードします。
```
loadPlaylist('<PLAYLIST_ID>');
```

次の項目に進む関数を作成します。

function advanceToNextItem() {
  const playlistManager = player.getPlaylistManager();
  const playlist = playlistManager.getPlaylist();

  // Advance to the next item
  playlist.moveToNext();
  player.loadBrightcoveVideoModel(playlist.getCurrentItem());
}

advanceToNextItem();

リモートソース

以下の手順に従って、リモートソースをプロジェクトに統合してください:

プレーヤーの初期化: Playerの新しいインスタンスを作成します。

const player = new Player({
// accountId is still required even when loading remote media
    accountId: '<ACCOUNT_ID>',
});

リモートビデオソースの定義: リモートビデオソースのURLを定義します。
```
const source = {
    url: 'https:'
};
```
リモートビデオの読み込み: リモートビデオソースをロードします。
```
player.loadRemoteVideo(source);  
```

IntegrationsManager

IntegrationsManager クラスは、ピンニング、サムネイル、IMA広告など、SDK内のさまざまな統合を管理するために設計されています。こちらを参照して下さい。これにより、さまざまな統合ファクトリーの登録、登録解除、およびアクセスが可能になり、動画プレーヤーを追加機能で強化する柔軟な方法が提供されます。

使用例

以下は、IntegrationsManager を使用して統合を登録し、プレーヤーインスタンス内で使用する方法の例です。

必要なモジュールのインポート: SDKから必要なモジュールをインポートします。

import { Player, IntegrationsManager } from '@brightcove/web-sdk';
 import { PinningIntegrationFactory } from '@brightcove/web-sdk/integrations/pinning';
 import { ThumbnailsIntegrationFactory } from '@brightcove/web-sdk/integrations/thumbnails';
 import '@brightcove/web-sdk/ui/styles';
 import '@brightcove/web-sdk/integrations/pinning/styles';
 import '@brightcove/web-sdk/integrations/thumbnails/styles';

インテグレーションの登録: プレーヤーのインスタンスを作成する前に、統合機能を登録します。

IntegrationsManager.registerPinningIntegrationFactory(PinningIntegrationFactory);
 IntegrationsManager.registerThumbnailsIntegrationFactory(ThumbnailsIntegrationFactory);

統合を使用したプレーヤーの初期化: プレーヤーの新しいインスタンスを作成し、それらの構成オプションで統合を含めます。

const player = new Player({accountId: '<ACCOUNT_ID>'});

player.updateConfiguration({
// Integrations can have their own configuration options
  integrations: {
    pinning: {
      posX: 'left',
      posY: 'top',
      closeable: true
    }
  }
});

プレーヤーを DOM にアタッチ: プレーヤーをアタッチする DOM 要素を指定します。
```
const root = document.querySelector('#player-mount-root');
 player.attach(root);          
```
個々の統合へのアクセス: IntegrationsManager を使用して、特定の統合にアクセスし、制御します。
```
const { pinningIntegration } = player.getIntegrationsManager();         
```
統合が提供する統合固有の操作の実行.
```
pinningIntegration.togglePinning();       
```

NetworkingManager

NetworkingManager は、SDKのリクエスト/レスポンスサイクルに接続するために使用され、プレーヤーが行うネットワークリクエストとレスポンスをインターセプトして操作できるため、さまざまなカスタム動作や最適化が可能になります。

NetworkingManager は主に2つの機能を提供します:

リクエストインターセプター: サーバーに送信される前に、送信リクエストをインターセプトして修正することができます。
レスポンスインターセプター: プレーヤーによって処理される前に、入力されたレスポンスをインターセプトして変更することができます。

NetworkingManager を使用するには、以下の手順に従ってください:

NetworkingManagerの初期化

const networkingManager = player.getNetworkingManager();

リクエストインターセプターの追加: リクエストインターセプターを追加して、送信リクエストを変更したりログに記録したりします。

networkingManager.addRequestInterceptor(Player.RequestType.HlsPlaylist, (request) => {
    console.log('HLS Playlist request interceptor', request);
    return request;
});

レスポンスインターセプターの追加: レスポンスインターセプターを追加して、受信したレスポンスを変更したりログに記録したりします。

networkingManager.addResponseInterceptor(Player.RequestType.HlsPlaylist, (response) => {
    console.log('HLS Playlist response interceptor', response);
    return response;
});

UiManager

UiManager は、UI Componentsを作成し、管理します。すべてのSDK UI ComponentはUiComponent クラスを継承しており、このクラスには広範なAPIが用意されています。

コンポーネントに渡すことができるオプションの基本リストについては、UiComponentDependencies インターフェースを参照してください。

デフォルトコンポーネントの上書き

アプリケーションのニーズに合わせて、既存のコンポーネントを変更することが出来ます。

必要なモジュールのインポート

import { UiManager, BigPlayButtonUiComponent, UiComponentType } from '@brightcove/web-sdk/ui';

カスタム UIコンポーネントの作成

class CustomPlayButton extends BigPlayButtonUiComponent {
  // ... custom play button code
}

デフォルトコンポーネントのオーバーライド: デフォルトの BigPlayButton を CustomPlayButton でオーバーライドします。
```
UiManager.overrideDefaultComponent(UiComponentType.BigPlayButton, CustomPlayButton);
      
```

カスタムコンポーネント

BaseUiComponent クラスを使用することで、独自の機能を追加したり、アプリケーションの要件に合わせてプレーヤーのインターフェースを調整することが出来ます。

注: カスタムコンポーネントの各インスタンスには、一意の name プロパティが必要です。

以下の手順でカスタムコンポーネントを適用します:

BaseUiComponent のインポート:

import { BaseUiComponent } from '@brightcove/web-sdk/ui';

UI Manager と Player Componentの初期化:


const uiManager = player.getUiManager();
 const playerComponent = uiManager.getPlayerContainerUiComponent();

DOM要素の作成:

const customElement = document.createElement('div');

新しいカスタム UIコンポーネントの作成:

const customComponent = new BaseUiComponent({
   // Add a unique name
   name: 'CustomUiComponent',
   componentOptions: {
     // Pass the custom DOM element as an option
     el: customElement,
   },
 });

カスタムコンポーネントをプレーヤーに追加します:
```
playerComponent.addChild(customComponent);
```

(オプション) カスタムコンポーネントを別のコンポーネントに追加: (例えば、コントロールバー)

const controlBarComponent = playerComponent.getChild('controlBar');
 controlBarComponent.addChild(customComponent);

PlaylistManager

The PlaylistManager は、プレイリストの作成、現在の再生中のアイテムの管理、プレイリストアイテムのナビゲートのためのメソッドを提供します。

To use the PlaylistManager を使用するには、以下の手順に従ってください:

PlaylistManager の初期化:

const playlistManager = player.getPlaylistManager();

Playback API レスポンスからプレイリストの作成:

const videoCloudPlaylist = playlistManager.createPlaylistFromBrightcoveVideoModels(
  /* Array<BrightcoveVideoModel> */
);

リモートソースからプレイリストの作成: また、リモートメディアソースを使用してプレイリストを作成することもできます。
```
const remotePlaylist = playlistManager.createPlaylistFromRemoteSources(
   /* Array<Source> */
 );
```

PlaylistManager にプレイリストを設定する:

playlistManager.setPlaylist(/* videoCloudPlaylist | remotePlaylist */);

最初のプレイリストアイテムのロード:

player.loadBrightcoveVideoModel(playlist.getCurrentItem());

プレイリストのナビゲート: プレイリストの項目をナビゲートするには、次の方法を使用します。
- 次の項目への移動:
```
playlist.moveToNext();
          
```
- 前の項目への移動:
```
playlist.moveToPrevious();
          
```
- 特定の項目への移動:
```
playlist.moveTo(/* index number */);
          
```
- プレイリストのシャッフル:
```
playlist.shuffle();
          
```
新しい現在の項目の読み込み: プレイリストで新しく選択された項目をロードします。
```
player.loadBrightcoveVideoModel(playlist.getCurrentItem());
      
```

イベント

イベントを処理し、イベントリスナーを追加または削除するには、以下の手順に従います:

イベントの最初の発信の処理: イベントの最初の発生だけを処理したい場合は、once メソッドを使用します。
```
player.once(Player.Event.PlayerPlaying, (event) => {
    console.log('PlayerPlaying event: ', event);
});
```

イベントのすべての発信の処理: イベントのすべての発信を処理するには、addEventListener メソッドを使用します。以下は、PlayerQualityLevelsChanged イベントを処理する例です:

// Define the event handler function
const handlePlayerQualityLevelsChanged = (event) => {
    console.log('PlayerQualityLevelsChanged event: ', event);
};

// Handle every emission of the PlayerQualityLevelsChanged event
player.addEventListener(Player.Event.PlayerQualityLevelsChanged, handlePlayerQualityLevelsChanged);

特定のイベントリスナーの削除: 特定のイベント・リスナーを削除するには、removeEventListener メソッドを使用します。
```
player.removeEventListener(Player.Event.PlayerQualityLevelsChanged, handlePlayerQualityLevelsChanged);
      
```
特定のイベントのすべてのリスナーの削除: 特定のイベントのすべてのリスナーを削除するには、removeAllEventListenersForType メソッドを使用します。
```
player.removeAllEventListenersForType(Player.Event.PlayerQualityLevelsChanged);      
```
すべてのイベントリスナーの削除: すべてのイベントのイベント・リスナーを削除するには、removeAllEventListeners メソッドを使用します:
```
player.removeAllEventListeners();   
```

エラー

エラーイベントをリッスンし、プレーヤーの現在のエラー状態をチェックするには、以下の手順に従います:

エラーイベントのリッスン:

this.player.addEventListener(Player.Event.PlayerError, (event) => {
  const error = event.error;

  console.log('An error occurred:', error);
});

スタイリング

UI機能に CSSを適用するには、以下の手順に従ってください:

Player クラスのインポート:

import Player from '@brightcove/web-sdk/ui';

Player クラスのCSSのインポート:
```
import '@brightcove/web-sdk/ui/styles';
```
統合固有のスタイルのインポート: その統合に固有のスタイルを以下からインポートする必要があります。
@brightcove/web-sdk/integrations/<integration-name>/styles
pinning のような特定の機能と統合する場合は、次のパターンに従います:
```
import '@brightcove/web-sdk/integrations/pinning/styles';
```

CSS 変数

@brightcove/web-sdk/ui/styles の CSS には、プレーヤーのスタイリングの特定の側面を制御するプリセット CSS 変数のセットが付属しています。これらの CSS 変数は、値をリセットすることでオーバーライドできます。

.bc-sdk {
     /* Override the default control bar color */
     --bc-sdk-control-bar-color: red;
 }

以下は利用可能な CSS変数とそのデフォルト値です:

変数	デフォルト値	説明
`--bc-sdk-control-color`	#fff	ボタンとテキストの色。
`--bc-sdk-progress-color`	#80888c	プログレスバーの色。
`--bc-sdk-control-bar-transparency`	0.45	コントロールバーと大きな再生ボタンの背景色の透明度。
`--bc-sdk-control-bar-color`	rgba(0, 0, 0, var(--bc-sdk-control-bar-transparency))	コントロールバーと大きな再生ボタンの背景色。
`--bc-sdk-big-play-button--border`	none	大きな再生ボタンの境界線。
`--bc-sdk-big-play-button--width`	2em	大きな再生ボタンの幅。
`--bc-sdk-big-play-button--height`	2em	大きな再生ボタンの高さ。

spatialNavigation は、リモコンの矢印キーを使ってプレーヤー内のインタラクティブ要素をナビゲートできるようにすることで、スマートTVデバイスでのユーザー体験とアクセシビリティを向上させます。

空間ナビゲーションの有効化

必要なPlayerクラスと関連するスタイルをインポートします。

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

Spatial Navigation のUI対応プレーヤーを初期化します。

const player = new Player({ accountId: '<ACCOUNT_ID>' });

 player.updateConfiguration({
   ui: {
     spatialNavigation: {
       // Enable Spatial Navigation
       enabled: true,
 
       // Enable horizontal navigation seek functionality, using right and left RCU arrow keys.
       horizontalSeek: true,
     }
   }
 });

Spatial Navigation Managerの取得.

const spatialNavigationManager = player.getSpatialNavigationManager();

Spatial Navigation イベントの管理。SpatialNavigationManager では、キーダウンイベントのリッスンの開始、一時停止、再開、停止ができます。

// Start listening for keydown events
spatialNavigationManager.start();

// Pause listening for keydown events without removing listeners
spatialNavigationManager.pause();

// Resume listening for keydown events after pausing
spatialNavigationManager.resume();

// Disable Spatial Navigation by removing all keydown listeners
spatialNavigationManager.stop();

空間ナビゲーションイベント

ウェブ & スマートTV SDKは、空間ナビゲーションのために2つの重要なイベントを提供します。:

Player.Event.SpatialNavigation.EndOfFocusableComponents: プレーヤーインタフェース内で、指定された方向に利用可能なフォーカス可能なコンポーネントがなくなったときに発生します。
Player.Event.SpatialNavigation.FocusableComponentsChanged: フォーカス可能なコンポーネントのリストが変更されたときに発生します。

ローカライゼーション

ローカライゼーションは、多様でグローバルな視聴者のニーズを満たすユーザーフレンドリーな動画プレーヤーを開発する上で非常に重要な側面になります。

複数の言語とローカライゼーションのサポートは、以下のように含めることができます:

一般的なプレーヤーのローカライズのインポート:

import mainJapanese from '@brightcove/web-sdk/ui/languagePacks/ja';

統合固有のローカライゼーションのインポート:

import ssaiJapanese from '@brightcove/web-sdk/integrations/ssai/languagePacks/ja';

UIマネージャーの初期化:

const uiManager = player.getUiManager();

UIマネージャーに言語パックの追加: UIマネージャーの addLanguagePack メソッドを使用して、インポートした言語パックを追加します:
```
uiManager.addLanguagePack('ja', mainJapanese);
 uiManager.addLanguagePack('ja', ssaiJapanese);
      
```

実装例

Brightcove ウェブ & スマートTV SDK をすぐに使いこなすために、いくつかのサンプル実装を提供しています。これらのサンプルは、さまざまな機能や使用例を示しており、SDK の効果的な使用方法を実践的に学ぶことができます。

以下のリンクから、さまざまなサンプル実装をご覧ください:

Brightcove ウェブ & スマートTV SDK の使用開始

SDKのインストール

npmの使用:

CommonJS

ES Module

CDNの使用

CommonJS

ES Module

IIFE (Immediately Invoked Function Expression)

バージョンの指定

プレーヤーのインポート

プレーヤーの初期化

メディアの読み込み

Video Cloud VOD

Video Cloud プレイリスト

リモート ソース

IntegrationsManager

使用例

NetworkingManager

UiManager

デフォルト コンポーネントの上書き

カスタム コンポーネント

PlaylistManager

イベント

エラー

スタイリング

CSS 変数

空間ナビゲーション

空間ナビゲーションの有効化

空間ナビゲーション イベント

ローカライゼーション

実装例

リモートソース

デフォルトコンポーネントの上書き

カスタムコンポーネント

空間ナビゲーションイベント