Brightcove Web & Smart TV SDK とピンニング統合

概要

ピンニング統合により、視聴者は画面上に動画をピン留めすることができ、ユーザーがページの他の部分をスクロールしている間も動画プレーヤーが表示されたままになります。これにより、中断することなく連続視聴が可能になり、ユーザー体験が向上します。

前提条件

Video Cloud にアクセスできる Brightcove アカウントを持っていること。
プロジェクトにインストールされている Brightcove ウェブ & スマートTV SDK。

使用例

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

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

Brightcove SDK からピンニング統合クラスをインポートします。

import { PinningIntegrationFactory } from '@brightcove/web-sdk/integrations/pinning';

Brightcove SDK からピンニング統合 CSS をインポートします。
```
import '@brightcove/web-sdk/integrations/pinning/styles';
 
```

ピンニング統合ファクトリーを Integrations Manager に登録します。

IntegrationsManager.registerPinningIntegrationFactory(PinningIntegrationFactory);

プレーヤーの作成と設定

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

 player.updateConfiguration({
   integrations: {
       pinning: {
           posX: 'left', 
           posY: 'top',  
           closeable: true, 
           // Add any other configurations as needed
       },
   },
 });

プレーヤーをマウントルート（ページ内の DOM 要素）にアタッチします:
```
const root = document.querySelector('#player-mount-root');
 player.attach(root);
  
```
Integrations Manager から Pinning Integration API にアクセスします。
```
const { pinningIntegration } = player.getIntegrationsManager();
  
```

ピンニング固有のメソッドの呼び出し。

pinningIntegration.togglePinning(); // Example method to toggle pinning

設定の概要

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

設定オプション	タイプ	デフォルト	説明
`allowOnMobile`	真偽値	false	デフォルトでは、ピンニングモードは Android や iOSのモバイルデバイスでは機能しません。
`closeable`	真偽値	true	デフォルトでは、ピンニングモードには閉じるボタンがあり、ユーザーはこれをクリックしてピンニングモードを無効にすることができます。
`height`	数値 \| null	null	デフォルトでは、プラグインはプレーヤの寸法を `scale` オプションで決定された係数で縮小します。ただし、`height` (または `width`) を指定すると、デフォルトのスケーリングがオーバーライドされ、スケールダウンされたプレーヤのサイズが明示的に設定されます。一方の寸法のみを指定すると、もう一方の寸法はアスペクト比を維持するために縮小されます。両方の寸法が指定された場合、プレーヤーは指定されたサイズに正確に設定されます。
`width`	数値 \| null	null	デフォルトでは、プラグインはプレーヤーの寸法を `scale` オプションで決定された係数で縮小します。ただし、`width` (または `height`) を指定すると、デフォルトのスケーリングがオーバーライドされ、スケールダウンされたプレーヤーのサイズが明示的に設定されます。
`scale`	数値	2/3	ピニングモードのときにプレーヤーに適用されるスケーリング係数。`0` より大きく `1` 以下の数値でなければならない。
`manualContainerSize`	真偽値	false	デフォルトでは、このプラグインを有効にしたプレーヤーは、特別なコンテナ要素の物理的な寸法をプレーヤーの寸法と同期させます。ただし、これはすべてのケースで機能するわけではないため、このオプションを `false` に設定することで無効にできます。そうすると、コンテナ要素は通常のブロック要素のように振る舞います。つまり、プラグインの利用者は自分でサイズを管理する必要があります。
`posX`	'right' \| 'left'	right	ピンニングモード時の水平方向の配置。
`posY`	'top' \| 'bottom'	bottom	ピニングモード時の垂直方向の配置。
`viewable`	数値	0.8	プレーヤーが表示可能とみなされる閾値。言い換えると、プレーヤーのこのパーセンテージがブラウザのビューポートに表示されている場合、プレーヤーは表示可能であると見なされます。たとえば、デフォルトが `0.8` の場合、プレーヤーの 80% がビューポートに表示されない限り、表示可能とは見なされません。`0` 以上 `1` 以下の数値でなければなりません。

パブリックメソッドの概要

メソッド	説明	パラメーター	パラメータータイプ	戻り値
`togglePinning`	現在の状態に基づいて、ピンニングモードを有効または無効にする。	None	N/A	void

イベントの概要

イベント名	属性	説明
`BeforePin`	読み取り専用	ピンアクションが実行される直前にトリガーされます。
`BeforePinClose`	読み取り専用	ピンクローズアクションが実行される直前にトリガーされます。
`BeforePinningDisabled`	読み取り専用	ピンニングが無効になる直前にトリガーされます。
`BeforePinningEnabled`	読み取り専用	ピンニングが有効になる直前にトリガーされます。
`BeforeUnpin`	読み取り専用	アンピンアクションが実行される直前にトリガーされます。
`Pin`	読み取り専用	ピンアクションが実行されたときにトリガーされます。
`PinClose`	読み取り専用	ピンを閉じるアクションが実行されたときにトリガーされます。
`PinningDisabled`	読み取り専用	ピンニングが無効のときにトリガーされます。
`PinningEnabled`	読み取り専用	ピンニングが有効な場合にトリガーされます。
`Unpin`	読み取り専用	アンピンアクションが実行されたときにトリガーされます。

Brightcove Web & Smart TV SDK とピンニング統合

概要

前提条件

使用例

設定の概要

パブリック メソッドの概要

イベントの概要

パブリックメソッドの概要