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

Jecelyn Yeen

Dale St. Marthe

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

概要

DevTools の [Media] パネルは、ページのメディア プレーヤーを検査するための主要な場所です。音声ソースと動画ソースは、[Media] パネルの左側の [Players] に、右側のセクションにはさまざまなプロパティと詳細が表示されます。

[メディア] パネルでは、次のことができます。

• メディア プレーヤーの情報を表示する。
• メディアの表示と非表示を切り替える
• リモート メディア プレーヤーのデバッグ。
• メディア プレーヤーの情報を書き出します。

メディアパネルを開く

[メディア] パネルを開くには:

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

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

メディア プレーヤーの情報を表示する手順は次のとおりです。

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

リモートデバッグ

Android デバイスのメディア プレーヤーの情報は、Windows、Mac、Linux で表示できます できます。

1. リモート デバッグを設定するには、こちらの手順に沿って操作してください。
2. メディア プレーヤーの情報をリモートで表示できるようになりました。

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

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

デバッグしやすくするために、各メディア プレーヤーの表示と非表示を切り替えることができます。

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

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

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