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

François Beaufort
François Beaufort

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

メディア再生エラーをデバッグするときに最初に確認するのが、HTML メディア要素の MediaError error 属性です。この属性は、メディア再生エラーの原因について大まかなヒントを示します。プロパティ MediaError.code は、メディア要素で発生したエラーの種類を表す数値を返します。もう 1 つのプロパティ 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 の [Media Panel] を使用してメディアログを表示します。イベント、警告、エラー メッセージなど、メディア再生エラーのヒントとなる多くの情報を確認できます。

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

また、無料アプリケーション 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 などの動画ストリーム分析プロフェッショナル ツールが、お金に見合う価値があるかもしれません。