ステップ・バイ・ステップ：Brightcove プレーヤーデバッガー

プレーヤーにデバッガープラグインを追加すると、Webブラウザで再生が行われる際に、リアルタイムで情報を追跡できます。

デバッガー付きプレーヤー

以下の画像を選択すると、別ウィンドウでプレーヤーとデバッガーを開くことができます。

概要

Brightcove プレーヤーデバッガーは、Brightcove プレーヤーまたは標準の Video.js プレーヤーと連携して動作するプラグインです。デバッガーは、現在使用されているプレーヤー、メディア、および広告に関する情報を記録、取得、表示します。次のプレーヤープラットフォームで動作します。

Brightcove Player v5+, v6+
Video.js v5, v6

次のプラグインを使用している場合、デバッガーは広告設定も記録します。

IMA
FreeWheel
Once UX

デバッガーについて学ぶ

Brightcove プレーヤーデバッガーの詳細：

Brightcove プレーヤーデバッガーの README 情報を確認します。ここでは、コードサンプル、デバッガーオプション、および表示データを確認できます。

Brightcove プレーヤーデバッガーは、<video> 要素の id 属性を使用して Brightcove プレーヤーに接続します。
デバッガーの主な機能は次のとおりです：
- トグルボタンにより、デバッガーを最小化してテスト時の表示領域を減らすことができます。
- player.on() メソッドを使用してプレーヤーイベントを監視し、ログ（Log） セクションに表示します。
- ブラウザのデバッグコンソールメッセージを取得し、ログセクションに表示します。
- プレーヤーで読み込まれている現在の動画について、mediainfo プロパティのデータを記録します。
- IMA プラグインを使用している場合、IMA3 広告設定を記録します。
- FreeWheel プラグインを使用している場合、FreeWheel 広告設定を記録します。
- 広告再生中は、現在の広告情報を記録します。広告設定 タブでこの情報を確認するには、プレーヤーを一時停止してください。
- プレーヤーに適用されている CSS クラスを取得し、現在のプレーヤー状態を表示します。
- Player Classes セクションでクラス名を選択／解除することで、プレーヤーにクラスを追加または削除できます。
- Log、Classes、Player Settings、Ad Settings タブを切り替えて、対応する表示セクションの表示／非表示を切り替えることができます。

プレーヤーを作成する

まず、Studio でプレーヤーを作成し、動画を割り当てます。

Studio で Players モジュールに移動します。ここで新しいプレーヤーを作成するか、既存のものを使用します。アカウントのデフォルトプレーヤーを使用することもできます。
Settings セクションで Edit ボタンを選択し、以下の設定を行います：
- Width（幅） を 640 に設定します。
- Height（高さ） を 360 に設定します。
プレーヤーのサイズは自由に設定することができます。
Save をクリックし、次に Publish をクリックしてプレーヤーを公開します。
Media モジュールで動画を選択し、このプレーヤーを使用して公開します。プレーヤーに動画コンテンツを割り当て、公開します。
Advanced（In-Page）埋め込みコードをコピーし、新しい HTML ファイルに貼り付けます。

この埋め込みコードの取得方法については、ステップバイステップ：Brightcove プレーヤードキュメントを参照してください。

<video> タグの開始タグに、id 属性を追加し、その値を myPlayer に設定します。

埋め込みコードは次のようになります：

      <video-js id="myPlayerID"
        data-video-id="4825296720001"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        data-application-id=""
        controls=""
        width="640"
        height="360"></video-js>
      <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

      <video-js id="myPlayerID"
        data-account="3676484087001"
          data-player="BkE8DMCzl"
          data-embed="default"
          data-application-id=""
          controls=""
          width="640"
          height="360"></video-js>
      <script src="https://players.brightcove.net/3676484087001/BkE8DMCzl_default/index.min.js"></script>

デバッガーファイルを追加する

このセクションでは、Brightcove プレーヤーデバッガーに必要なスタイルとスクリプトを追加します。

プレーヤーコードの下に、デバッガーの CSS ファイルを参照する <link> タグを追加します。タグは次のようになります：
```
        <link href="//your web domain/videojs-player-debugger.css" rel="stylesheet">
```
前のコードの下に、デバッガーの JavaScript ファイルを参照する <script> タグを追加します。タグは次のようになります：
```
        <script src="//your web domain/videojs-player-debugger.min.js"></script>
```

オプションを指定してデバッガーを呼び出す

このセクションでは、デバッガーのオプションを設定し、プレーヤーにデバッガーを追加します。

以下は利用可能なオプションとその簡単な説明の一覧です：

オプション	説明	デフォルト値
captureConsole	JavaScript コンソールから出力されるメッセージをログに含めます。	true
debugAds	広告イベントおよびデバッグ情報をログに記録します。	true
logClasses	各イベントでプレーヤークラスをログに記録します。プレーヤーの状態を追跡するのに役立ちます。	false
logType	ログデータの形式を「table」または「list」から選択します。	list
showMediaInfo	`mediainfo` データをプレーヤー設定パネルに表示します。	true
showPosterStyles	ポスタークラスおよびスタイルを記録・表示します。	false
showProgress	進行状況イベントをログに記録します。	false
startMinimized	デバッガーを最小化（ボタン状態）で起動します。	false
useLineNums	ログ出力に行番号を含めます。	false
verbose	詳細なプレーヤーおよび広告イベントメッセージをログに記録します。	false

HTML ページコード内で、</body> タグの直前に次のスクリプトコードを追加します：
- 2行目：プレーヤーの参照を取得します。
- 3行目：プレーヤーの準備完了を待ちます。
- 4行目：デバッガーのオプションを定義します。この例では広告なしのプレーヤーです。
- 6行目：指定したオプションでデバッガーを呼び出します。
```
      <script>
        var myPlayer = videojs.getPlayer('myPlayerID');
        myPlayer.ready(function(){
            var options = {"debugAds":false, "logClasses": true};
            myPlayer.playerDebugger(options);
        });
      </script>
```

完成した HTML ページコードは次のようになります：

      <!doctype html>
      <html>
      
      <head>
          <meta charset="UTF-8">
          <title>BC プレーヤーデバッガー</title>
      </head>
      
      <body>
      
          <video-js id="myPlayerID"
            data-video-id="4825296720001"
              data-account="1752604059001"
              data-player="default"
              data-embed="default"
              data-application-id=""
              controls=""
              width="640"
              height="360"></video-js>
          <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
      
        <!-- BC プレーヤーデバッガーのスタイルとスクリプト -->
          <link href="/assets/css/videojs-player-debugger.css" rel="stylesheet">
          <script src="/assets/js/videojs-player-debugger.min.js"></script>
      
        <!-- ページスクリプト -->
          <script>
            var myPlayer = videojs.getPlayer('myPlayerID');
            myPlayer.ready(function(){
              var options = {"debugAds":false, "logClasses": true};
              myPlayer.playerDebugger(options);
            });
          </script>
      
      </body>
      </html>

ブラウザで HTML ファイルを実行すると、プレーヤーの下にデバッガーが表示されます。

Log タブ

Log セクションには、プラグインが取得したすべてのプレーヤーイベントが表示されます。

プレーヤーデバッガーで Log タブが選択されていることを確認します。選択されているタブは緑色で表示されます。

Log セクションの表示

イベントに追加情報がある場合、その情報も表示されます。たとえば、loadedmetadata では、次のデータが表示されます。
- account id
- video id
- duration
- short description
詳細なしでイベントのみを記録するには、verbose オプションを false に設定します。
ログの初期イベントに注目してください。動画を再生してから一時停止します。再生・一時停止に関連するイベントが表示されるはずです。

再生および一時停止イベント
動画を最後まで再生します。ended イベントの前に pause イベントがあることに気づくはずです。

ended イベント

Playback Info タブ

Playback Info セクションには、読み込まれた動画の再生情報が表示されます。

プレーヤーデバッガーで Playback Info タブを選択します。選択されているタブは緑色で表示されます。

Playback Info タブ

現在読み込まれている動画について、表示されている情報を確認してください。

Classes タブ

Classes セクションには、プレーヤーに付与されている CSS クラスが表示されます。アクティブなクラスは緑色／太字、非アクティブなクラスは白色／通常の太さで表示されます。

プレーヤーデバッガーで Classes タブを選択します。選択されているタブは緑色で表示されます。

Classes タブ

クラスを選択してプレーヤーに適用できます。これにより、さまざまなプレーヤーの状態をテストできます。

Player Settings タブ

Player Settings セクションには、player id や account id を含むプレーヤー情報が表示されます。また、現在読み込まれている動画について、レンディション、ソース、マスターファイルなど、mediainfo オブジェクトのデータも表示されます。

プレーヤーデバッガーで Player Settings タブを選択します。選択されているタブは緑色で表示されます。

Player Settings タブ

IMA 広告のデバッグ

デバッガーは、広告イベントとその発生時のプレーヤーの状態を取得・記録します。デバッガーは「パンくずリスト（breadcrumb）」を作成し、広告再生中のイベントの流れをわかりやすく追跡できるようにします。

まず、プレーヤーに広告プラグインと広告 URL を追加します。この例では IMA 広告を使用します。

HTML ファイルに戻ります。プレーヤーの <script> タグの下に、次の IMA プラグイン用ファイルを追加します。

4行目：IMA プラグインのスタイルを定義します。
5行目：IMA プラグインの JavaScript ファイルを定義します。

        <script src="https://players.brightcove.net/1752604059001/SJJokFGWx_default/index.min.js"></script>
      
        <!-- IMA のスタイルとスクリプト -->
        <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet">
        <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>

        <script src="https://players.brightcove.net/3676484087001/BkE8DMCzl_default/index.min.js"></script>
      
        <!-- IMA のスタイルとスクリプト -->
        <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet">
        <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>

ページスクリプトセクションで、広告 URL を定義し IMA プラグインを呼び出すコードを追加します。

4行目：プレーヤーデバッガーのオプションを定義します。debugAds オプションが true に設定されていることに注目してください。
5行目：広告 URL を定義します。
7〜11行目：広告 URL とオプションを指定して IMA プラグインを呼び出します。

      <script>
        var myPlayer = videojs.getPlayer('myPlayerID');
        myPlayer.ready(function(){
            var options = {"debugAds":true, "logClasses": true};
            myAdUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator="
      
            myPlayer.ima3({
              serverUrl: myAdUrl,
              timeout: 5000,
              debug: true
            });
            myPlayer.playerDebugger(options);
        });
      </script>

完成した HTML ページコードは次のようになります。

      <!doctype html>
      <html>
      
      <head>
        <meta charset="UTF-8">
        <title>BC プレーヤーデバッガー</title>
      </head>
      
      <body>
      
        <video-js id="myPlayerID"
          data-video-id="4825296720001"
          data-account="1752604059001"
          data-player="default"
          data-embed="default"
          data-application-id=""
          controls=""
          width="640"
          height="360"></video-js>
        <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
      
        <!-- BC プレーヤーデバッガーのスタイルとスクリプト -->
        <link href="/assets/css/videojs-player-debugger.css" rel="stylesheet">
        <script src="/assets/js/videojs-player-debugger.min.js"></script>
      
        <!-- IMA のスタイルとスクリプト -->
        <link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet">
        <script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>
      
        <!-- ページスクリプト -->
        <script>
          var myPlayer = videojs.getPlayer('myPlayerID');
          myPlayer.ready(function(){
            var options = {"debugAds":true, "logClasses": true};
            myAdUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator="
      
            myPlayer.ima3({
              serverUrl: myAdUrl,
              timeout: 5000,
              debug: true
            });
            myPlayer.playerDebugger(options);
          });
        </script>
      
      </body>
      </html>

ブラウザで HTML ページを実行します。Ad Settings タブを選択すると、プレーヤーの下に広告設定セクションが表示されます。

Ad Settings タブ
動画を再生します。この例では、動画の冒頭に 1 つの広告が含まれています。広告が再生されると、追加のイベント情報が表示されます。

IMA 広告イベント
これで Brightcove プレーヤーデバッガーの基本的な使い方を理解しました。あとは自由に活用してみましょう。