Brightcove プレーヤー デバッグモードとは
デバッグモードを使用すると、プレーヤーやプラグインがコンソール上に一部のログ情報を表示し、問題のトラブルシューティングを行いやすくなります。現在のところ、すべてのプレーヤーコンポーネントがデバッグモードと連動しているわけではありませんが、今後さらに対応範囲が拡大される予定です。
デバッグモードがオンの場合、プレーヤーのVideo.js のログ レベルがデバッグに設定され、ログ履歴の追跡が有効になります。デバッグモードがオフの場合、ログレベルは off に設定され、ログ履歴の追跡は無効になります。
デバッグ情報はコンソールに表示されます。以下は、proxy-tracks、IMA3 広告、シークイベントに関するデバッグ情報の一例です。
デバッグモードのオン／オフを切り替える方法はいくつかあり、次のセクションで詳しく説明します。
デバッグモードの有効化
デバッグモードを有効にする方法は4つあります。
プレーヤー設定
Studio でプレーヤーを編集し、JSON エディタ に "debug": true, を追加するとデバッグモードを有効化できます。
JSON の行を追加した後は、必ず保存してプレーヤーを公開してください。
クエリパラメータ
標準プレーヤーコード（iframe）を使用している場合は、クエリパラメータを追加してデバッグモードを有効にできます。次のように ?debug（ハイライト部分）を追加します。
<iframe src="https://players.brightcove.net/.../index.html?debug"></iframe>属性
Videoタグ プレーヤー コードを使用している場合は、属性を追加してデバッグモードを有効にできます。以下のように data-debug 属性（ハイライト部分）を追加します。
<video-js id="myPlayerID"
data-debug
data-account="1507807800001"
data-player="5qbwL2GCf"
...></video-js>
<script src="https://players.brightcove.net/1507807800001/5qbwL2GCf_default/index.min.js">手動で bc() メソッドを使用
bc() 関数を手動で呼び出す場合は、次のように debug オプションを渡すことでデバッグモードを有効化できます。
const player = bc('example', {debug: true});実行時にプレーヤー デバッグモードを制御する
デバッグモードを実行時に制御する場合、player.debug() メソッドを使用できます。以下のコードでは、デバッグモードのオン／オフを切り替えることができます。
...
<button onclick="toggleDebug()">デバッグモード切り替え</button>
...
<script>
var myPlayer;
videojs.getPlayer('myPlayerID').ready(function () {
myPlayer = this;
});
function toggleDebug() {
if (myPlayer.debug()) {
myPlayer.debug(false);
} else {
myPlayer.debug(true);
}
console.log('debug state: ', myPlayer.debug());
}
</script>デバッグモード イベント
デバッグモードが変更されると、対応するイベントがディスパッチされます：
- debugon
- debugoff
以下は、上記のコードにイベント ハンドラーを追加した例です。
...
<button onclick="toggleDebug()">デバッグモード切り替え</button>
...
<script>
var myPlayer;
videojs.getPlayer('myPlayerID').ready(function () {
myPlayer = this;
myPlayer.on('debugon', function () { console.log('dispatch debugon') });
myPlayer.on('debugoff', function () { console.log('dispatch debugoff') });
});
function toggleDebug() {
if (myPlayer.debug()) {
myPlayer.debug(false);
} else {
myPlayer.debug(true);
}
console.log('debug state: ', myPlayer.debug());
}
</script>