ステップバイステップ: 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.
- ナビゲーションヘッダーの セットで€6 その後 出版 インクルード player.
- の中に メディア モジュール、ビデオを選択し、これで公開します player.ビデオコンテンツを player そしてそれを公開します。
-
拡張(ページはめ込み)埋め込みコードをコピーし、新しいHTMLファイルに貼り付けます。
-
オープニング
<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>
- 4行目:オプションを定義します player デバッガ。 そのことに注意してください
-
完全な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 デバッガ。 自分で探索する準備が整いました。