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

François Beaufort
François Beaufort

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

メディアの再生エラーをデバッグするときは、通常、まず 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 の「メディアパネル」を使用してメディアログを表示します。イベント、警告、エラー メッセージなど、メディア再生エラーの適切なヒントとなる多くの情報があります。

<ph type="x-smartling-placeholder">
</ph> 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 といった動画ストリーム分析用のプロフェッショナル ツールも、お金に見合う価値があるかもしれません。