ステップバイステップ： Brightcove Player デバッガ

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

　 player デバッガーで

下の画像を選択して開きます player 別のウィンドウのデバッガ。

概要

　 Brightcove Player デバッガーは、 Brightcove Player または標準のVideo.js player。デバッガーは、 player、メディア、および現在使用中の広告。以下で動作します player プラットフォーム：

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

デバッガは、次のプラグインを使用すると広告設定を記録します。

IMA
フリーホイール
一度UX

リソースリンク：

デバッガについて学ぶ

そのことについて学ぶ Brightcove Player デバッガ：

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

　 Brightcove Player デバッガーはそれ自体を Brightcove Player 使用して、 <video> 要素の id 属性。
デバッガの機能は次のとおりです。
- トグルボタンを使用すると、デバッガーを最小化して、テスト時にフットプリントを削減できます。 player野生のs。
- 聞く player を使用したイベント player.on() メソッドを呼び出し、それらをログの項目を検索します。
- ブラウザのデバッグコンソールのメッセージをキャプチャし、ログの項目を検索します。
- に読み込まれている現在のビデオ player、デバッガーは mediainfo プロパティ。
- IMAプラグインを使用すると、デバッガはIMA3広告設定を記録します。
- FreeWheelプラグインを使用すると、デバッガはFreeWheel広告設定を記録します。
- 広告の再生中、デバッガーは現在の広告情報を記録します。一時停止 player この情報を 広告の設定 タブでを確認できます。
- それは現在をキャプチャして表示します player に接続されているCSSクラスを使用して状態 player.
- クラス名を選択/選択解除することで Player クラス セクションでは、からクラスを追加/削除できます player.
- あなたはログ, クラス, Player 設定 更に 広告の設定 タブでは、対応する表示セクションの表示/非表示を切り替えることができます。

作ります player

最初に、 player in Studio そしてそれにビデオを割り当てます。

In Studio、 Players の作成と管理 モジュール。ここで、新しい player または既存のものを使用します。デフォルトを使用することもできます player あなたのアカウントに。
の中に設定セクションで、編集ボタンをクリックし、次の操作を行います。
- をセットする幅オプション 640.
- をセットする身長オプション 360.
のサイズを設定できます player あなたが望むものに。
ナビゲーションヘッダーの セットで€６ その後出版インクルード player.
の中に メディア モジュール、ビデオを選択し、これで公開します player.ビデオコンテンツを player そしてそれを公開します。
拡張（ページはめ込み）埋め込みコードをコピーし、新しいHTMLファイルに貼り付けます。

この埋め込みコードを取得する方法の詳細については、ステップバイステップ： Brightcove Player の資料をご参照ください。

オープニング <video> タグを追加し、 id 値を持つ属性 myPlayer.

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

<video-js id="myPlayerID"
  data-video-id="4825296720001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  class="video-js"
  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
	class="video-js"
	controls
	width="640"
	height="360"></video-js>
<script src="https://players.brightcove.net/3676484087001/BkE8DMCzl_default/index.min.js"></script>

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

このセクションでは、スタイルとスクリプトを追加し、 Brightcove Player デバッガ。

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

デバッガをオプションで呼び出す

このセクションでは、デバッガーのオプションを設定し、それを呼び出してデバッガーを player.

オプションの一覧とそれぞれの簡単な説明は次のとおりです。

オプション	説明	デフォルト値
captureConsole	ログには、JavaScriptコンソールから出力されたメッセージを含めます。	true
debugAds	広告イベントとデバッグ情報を記録します。	true
logClasses	ログ player 各イベントのクラス。これは追跡に役立ちます player でのみ停止させることができます。	false
logType	記録されたデータのフォーマット（テーブルまたはリスト）を選択します。	リスト
showMediaInfo	を含める `mediainfo` のデータ Player 設定ペイン。	true
showPosterStyles	ポスタークラスとスタイルを記録して記録します。	false
showProgress	進行状況イベントを記録します。	false
startMinimized	最小化（ボタン）状態でデバッガを起動します。	false
useLineNums	ログ出力に行番号を含めます。	false
詳細	詳細なログ player および広告イベントメッセージ。	false

あなたのHTMLページコードでは、閉じる前に </body> タグを追加するには、次のスクリプトコードを追加します。
- 2行目：への参照を取得します player.
- 3行目：あなたを待つ player 準備する。
- 4行目：デバッガーのオプションを定義します。この例では、 player 広告なし。
- Line 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 Player Debugger</title>
</head>

<body>

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

  <!-- BC Player Debugger styles and script -->
    <link href="//learning-services-media.brightcove.com/doc-assets/css/debugger/videojs-player-debugger.css" rel="stylesheet">
    <script src="//learning-services-media.brightcove.com/doc-assets/js/debugger/videojs-player-debugger.min.js"></script>

  <!-- page script -->
    <script>
      var myPlayer = videojs.getPlayer('myPlayerID');
      myPlayer.ready(function(){
        var options = {"debugAds":false, "logClasses": true};
        myPlayer.playerDebugger(options);
      });
    </script>

</body>
</html>

  <!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>BC Player Debugger</title>
</head>

<body>

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

  <!-- BC Player Debugger styles and script -->
    <link href="//learning-services-media.brightcove.com/doc-assets/css/debugger/videojs-player-debugger.css" rel="stylesheet">
    <script src="//learning-services-media.brightcove.com/doc-assets/js/debugger/videojs-player-debugger.min.js"></script>

  <!-- page script -->
    <script>
			var myPlayer = videojs.getPlayer('myPlayerID');
			myPlayer.ready(function(){
	        var options = {"debugAds":false, "logClasses": true};
	        myPlayer.playerDebugger(options);
	    });
    </script>

</body>
</html>

ブラウザで、HTMLファイルを実行します。以下のデバッガが表示されます player.

Brightcove Player デバッガ

[ログ]タブ

　ログセクションには、 player プラグインがキャプチャしたイベント。

の中に player デバッガー、ログタブが選択されます。選択すると、タブが緑色で表示されます。

ログセクションの表示

イベントが追加の情報を公開すると、その情報も表示されます。たとえば、on loadedmetadata次のデータも表示されます。
- アカウントID
- 動画ID
- デュレーション
- 簡単な説明
詳細を指定せずにイベントをログに記録するには、詳細オプション false.
ログの初期イベントを確認します。ビデオの再生を開始し、一時停止します。ビデオの再生と一時停止に関連するイベントが表示されるはずです。

イベントの再生と一時停止
ビデオを最後まで再生させてください。そこには 一時停止 イベントの前に 終わった イベント。

終了イベント

再生情報タブ

　 再生情報 セクションには、ロードされたビデオの再生情報が表示されます。

の中に player デバッガー、 再生情報 タブ。選択すると、タブが緑色で表示されます。

再生情報タブ

現在読み込まれているビデオに表示される情報を確認します。

クラスタブ

　 クラス セクションには、 player。アクティブなクラスは緑/太字のテキストで表示され、非アクティブなクラスは白/通常のテキストで表示されます。

の中に player デバッガー、 クラス タブ。選択すると、タブが緑色で表示されます。

クラスタブ

クラスを選択して、 player。これにより、さまざまなテストを行うことができます player 状態。

　 Player 設定タブ

　 Player 設定 セクション表示 player 含む情報 player IDとアカウントID。また、 mediainfo レンディション、ソース、マスターファイルなど、現在ロードされているビデオのオブジェクト

の中に player デバッガー、 Player 設定 タブ。選択すると、タブが緑色で表示されます。

Player 設定タブ

デバッグIMA広告

デバッガーは、広告イベントと、 player イベントが発生したとき。デバッガーはパンくずリストを作成し、広告の再生中にイベントの進行を簡単に確認できるようにします。

まず、広告プラグインと広告URLを player。この例では、IMA広告を使用しています。

HTMLファイルに戻ります。下 player's <script> タグを追加するには、IMAプラグインに次のファイルを追加します。

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

    <script src="https://players.brightcove.net/1752604059001/SJJokFGWx_default/index.min.js"></script>

    <!-- IMA styles and script -->
    <link href="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.css" rel="stylesheet">
    <script src="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.js"></script>

    <script src="https://players.brightcove.net/3676484087001/BkE8DMCzl_default/index.min.js"></script>

  <!-- IMA styles and script -->
    <link href="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.css" rel="stylesheet">
  <script src="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.js"></script>

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

4行目：オプションを定義します player デバッガ。そのことに注意してください debugAds オプションがに設定されています true.
Line 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 Player Debugger</title>
</head>

<body>

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

  <!-- BC Player Debugger styles and script -->
    <link href="//learning-services-media.brightcove.com/doc-assets/css/debugger/videojs-player-debugger.css" rel="stylesheet">
    <script src="//learning-services-media.brightcove.com/doc-assets/js/debugger/videojs-player-debugger.min.js"></script>

		<!-- IMA styles and script -->
    <link href="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.css" rel="stylesheet">
    <script src="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.js"></script>

  <!-- page 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>

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>BC Player Debugger</title>
</head>

<body>

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

  <!-- BC Player Debugger styles and script -->
    <link href="//learning-services-media.brightcove.com/doc-assets/css/debugger/videojs-player-debugger.css" rel="stylesheet">
    <script src="//learning-services-media.brightcove.com/doc-assets/js/debugger/videojs-player-debugger.min.js"></script>

		<!-- IMA styles and script -->
    <link href="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.css" rel="stylesheet">
    <script src="https://players.brightcove.net/videojs-ima3/3/videojs.ima3.min.js"></script>

  <!-- page 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ページを実行します。を選択 広告の設定 タブ。以下の広告設定セクションが表示されます player.

[広告設定]タブ
ビデオの再生を開始します。この例では、動画の先頭に広告が1つあります。広告が再生されると、追加のイベント情報が表示されます。

IMA広告イベント
今では、 Brightcove Player デバッガ。自分で探索する準備が整いました。

ページ内容

ステップバイステップ： Brightcove Player デバッガ

player デバッガーで

概要

デバッガについて学ぶ

作ります player

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

デバッガをオプションで呼び出す

[ログ]タブ

再生情報タブ

クラスタブ

Player 設定タブ

デバッグIMA広告

　 player デバッガーで

　 Player 設定タブ