ビューアビリティ

概要

プレーヤーのビューアビリティ（視認性）は、広告連携やフローティング プレーヤーのような UI 表現において極めて重要です。本コンテキストでは、「ビューアビリティ」を、任意の時点でブラウザのビューポート内に表示されているプレーヤーの割合として定義します。プレーヤーの一定割合がビューポート内にある場合、そのプレーヤーは「ビューアブル（可視）」と見なされます。

Brightcove Player 7 では、ビューアビリティを追跡する DOM イベントが導入され、プレーヤーの視認状態に依存する有用な動作が追加されています。

プレーヤー設定

プレーヤーのビューアビリティ イベントと動作は、プレーヤーの JSON 設定で構成できます。すべての設定は viewability プロパティ配下にあります。

例

以下はビューアビリティ設定を含むプレーヤー構成 JSON の例です：

{
        ... other properties ...
        "viewability": {
          "viewability_threshold": 0.3,
          "pause_when_not_viewable": true
        }
      }

この例では、プレーヤーの可視部分が 30% 未満になる（ユーザーがスクロールして画面外に移動するなど）と再生が一時停止し、再び可視範囲に戻ると再生が再開されます。

ビューアビリティ イベント

ユーザーは、ビューアビリティに関連する 3 つの新しいイベントを利用できます。

• viewable-change

  このイベントは、プレーヤーがビューアブルな状態へ移行する、またはその状態から離れる際に発火します。

  プロパティ	タイプ	説明
  viewable	boolean	プレーヤーがビューアブルな状態かどうかを示します
  viewablePercent	number	現在ビューポートに表示されているプレーヤーの割合を 0〜1 の小数で表します（例：0.5 は 50% を意味します）

  例

  player.on('viewable-change', (e) => {
            if (e.viewable) {
              player.log('the player is viewable!');
            } else {
              player.log('the player is not viewable!');
            }
          });

  
  

• viewable-percent-change

  このイベントは、プレーヤーのビューアブル割合が変化したときに発火します。

  プロパティ	タイプ	説明
  viewable	boolean	プレーヤーがビューアブルな状態かどうかを示します
  viewablePercent	number	現在ビューポートに表示されているプレーヤーの割合を 0〜1 の小数で表します（例：0.5 は 50%）

  例

  player.on('viewable-percent-change', (e) => {
            let percentage = e.viewablePercent * 100;
            player.log(`the player is ${percentage}% viewable!`);
          });

  
  

• viewable-ad-impression

  このイベントは、ビューアブルな広告インプレッションが計測された際に発火します。広告再生時以外には発火しません。

  つまり、広告が再生を開始し、プレーヤーがビューアブルな状態で min_duration_for_viewable_impression で指定した時間だけ再生された後、このイベントが発火します。

  このイベントでは追加データは渡されません。