サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

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

    このトピックでは、 Brightcove Player についての情報をキャプチャしてログに記録するデバッガ player、メディア、広告。

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

    player デバッガーで

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

    Player 外部ファイルへのリンク
    Player 外部ファイルへのリンク
    Player 外部ファイルへのリンク
    Player 外部ファイルへのリンク

    概要

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

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

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

    • IMA
    • フリーホイール
    • 一度UX

    リソースリンク:

    デバッガについて学ぶ

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

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

      Brightcove Player デバッガーはそれ自体を Brightcove Player 使用して、 <video> 要素の id 属性。

    2. デバッガの機能は次のとおりです。

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

    作ります player

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

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

    6. オープニング <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 デバッガ。

    1. 以下 player コード、追加 <link> タグはデバッガのCSSファイルのコピーを指します。 タグは次のようになります。

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

        <script src="//your web domain/videojs-player-debugger.min.js"></script>

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

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

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

      オプション 説明 デフォルト値
      captureConsole ログには、JavaScriptコンソールから出力されたメッセージを含めます。 true
      debugAds 広告イベントとデバッグ情報を記録します。 true
      logClasses ログ player 各イベントのクラス。 これは追跡に役立ちます player でのみ停止させることができます。 false
      logType 記録されたデータのフォーマット(テーブルまたはリスト)を選択します。 リスト
      showMediaInfo を含める mediainfo のデータ Player 設定ペイン。 true
      showPosterStyles ポスタークラスとスタイルを記録して記録します。 false
      showProgress 進行状況イベントを記録します。 false
      startMinimized 最小化(ボタン)状態でデバッガを起動します。 false
      useLineNums ログ出力に行番号を含めます。 false
      詳細 詳細なログ player および広告イベントメッセージ。 false
    2. あなたの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>
    3. 完全な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>
      
    4. ブラウザで、HTMLファイルを実行します。 以下のデバッガが表示されます player.

      Brightcove Player デバッガ
      Brightcove Player デバッガ

    [ログ]タブ

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

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

      ログセクションの表示
      ログセクションの表示

      イベントが追加の情報を公開すると、その情報も表示されます。 たとえば、on loadedmetadata次のデータも表示されます。

      • アカウントID
      • 動画ID
      • デュレーション
      • 簡単な説明

      詳細を指定せずにイベントをログに記録するには、 詳細 オプション false.

    2. ログの初期イベントを確認します。 ビデオの再生を開始し、一時停止します。 ビデオの再生と一時停止に関連するイベントが表示されるはずです。

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

      終了イベント
      終了イベント

    再生情報タブ

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

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

      再生情報タブ
      再生情報タブ

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

    クラスタブ

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

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

      クラスタブ
      クラスタブ

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

    Player 設定タブ

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

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

      Player 設定タブ
      Player 設定タブ

    デバッグIMA広告

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

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

    1. 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>
    2. ページスクリプトセクションで、広告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>
    3. 完全な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>
      
    4. ブラウザでHTMLページを実行します。 を選択 広告の設定 タブ。 以下の広告設定セクションが表示されます player.

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

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

    ページの最終更新日:28年2020月XNUMX日