ウェブ上でのメディア再生エラーをデバッグする

François Beaufort
François Beaufort

<video><audio> などの HTML メディア要素のデバッグは、デコーダの実装によってエラーとみなすものがさまざまであるため(一般的にはハードウェア デコーダが最も厳格です)、特に再生が特定のコーデックのより難解な機能を使用する場合には、デバッグが難しいことがあります。幸い、役に立つさまざまなツールがあります。

メディアの再生エラーをデバッグするときは、通常、まず HTML メディア要素の MediaError error 属性を確認します。この属性は、メディア再生エラーの原因を示す大まかなヒントです。プロパティ MediaError.code は、メディア要素で発生したエラーの種類を表す数値を返します。他のプロパティ MediaError.message は、ブラウザからの診断情報を含む文字列を提供する場合があります。

const video = document.querySelector('video');
video.addEventListener('error', () => {
  console.log('Error code: ' + video.error.code);
  console.log('Error message: ' + video.error.message);
});

これらのプロパティはテレメトリー分析に最も有用ですが、再生エラーをデバッグするのに十分な情報が提供されない場合があります。プライバシー上の理由から、エラーの全文を省略しなければならない場合があります。

完全なエラー情報にアクセスするには、Chrome DevTools の「メディアパネル」を使用してメディアログを表示します。イベント、警告、エラー メッセージなど、メディア再生エラーの適切なヒントとなる多くの情報があります。

Chrome DevTools のメディアパネルのスクリーンショット
Chrome DevTools のメディアパネル。

また、無料アプリケーション FFmpeg を使用すると、次のコマンドによってメディア ファイルの整合性を確認することもできます。

ffmpeg -err_detect explode -i <file> -f null -

無効なコーデックを含む動画ファイルに対してこれらのコマンドを使用すると、次のようなエラーが発生することがあります。

[mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fc62df05380] Could not find codec parameters for stream 0 (Video: none (zzzz / 0x7A7A7A7A), none(smpte170m/smpte170m/bt709, progressive), 320x240, 4 kb/s): unknown codec
Consider increasing the value for the 'analyzeduration' (0) and 'probesize' (5000000) options
[matroska,webm @ 0x7fd45b705380] Unknown EBML doctype '0000'
[matroska,webm @ 0x7f8d17904d40] Element at 0x8b ending at 0x10400000095 exceeds containing master element ending at 0x9b
Truncating packet of size 9069 to 94

MP4Box.js / ISOBMFF Box Structure Viewer は、ビットストリームの問題をデバッグする際に便利なツールです。ただし、使用するには MP4 を理解している必要があります。

最後に、VQAnalyzerElecard StreamEyeCodecian CodecVisa などの動画ストリーミング分析プロフェッショナル ツールは、費用対効果が高い場合があります。