メディア: メディア プレーヤー情報の表示とデバッグ

Jecelyn Yeen

Twitter GitHub ホームページ

Chrome DevTools の [メディア] パネルを使用して、ブラウザのタブごとにメディア プレーヤーの情報を表示し、デバッグします。

メディアパネルを開く

[Media] パネルは、DevTools でページのメディア プレーヤーを調べるためのメインの場所です。

1. DevTools を開きます。
2. その他のオプション > [その他のツール] > [メディア] をクリックして、メディアパネルを開きます。

メディア プレーヤー情報を表示する

1. メディア プレーヤーのあるページにアクセスします（https://youtu.be/e1gAyQuIFQo など）。
2. [プレーヤー] メニューにメディア プレーヤーが表示されるようになりました。
3. プレーヤーをクリックします。[Properties] タブには、メディア プレーヤーのプロパティが表示されます。
4. [イベント] タブをクリックして、メディア プレーヤーのイベントをすべて表示します。
5. [メッセージ] タブをクリックして、メディア プレーヤーのメッセージ ログを表示します。メッセージは、ログレベルまたは文字列でフィルタリングできます。
6. [Timeline] タブでは、メディアの再生とバッファ ステータスをリアルタイムで確認できます。

リモートデバッグ

Android デバイス上のメディア プレーヤーの情報は、Windows、Mac、Linux のパソコンから表示できます。

1. リモート デバッグをセットアップするには、こちらの手順を行います。
2. これで、メディア プレーヤーの情報をリモートで表示できるようになりました。

メディア プレーヤーの表示と非表示を切り替える

場合によっては、1 ページに複数のメディア プレーヤーが存在することや、同じブラウザタブを使用して複数のページを閲覧し、各ページにメディア プレーヤーが配置されていることもあります。

各メディア プレーヤーの表示 / 非表示を切り替えることで、デバッグが容易になります。

1. 同じブラウザタブを使って複数の動画ページを閲覧します。
2. いずれかのメディア プレーヤーを右クリックします。選択したプレーヤーを非表示にするには、[プレーヤーを非表示] を選択し、他のすべてのプレーヤーを非表示にするには [他のプレーヤーをすべて非表示] を選択します。

メディア プレーヤー情報のエクスポート

1. いずれかのメディア プレーヤーを右クリックします。
2. [プレーヤー情報を保存] を選択してプレーヤー情報を json 形式でダウンロードします。