Fehler bei der Medienwiedergabe im Web beheben

François Beaufort
François Beaufort

Das Debugging von HTML-Medienelementen wie <video> und <audio> kann schwierig sein, da Decoderimplementierungen in Bezug auf Fehler variieren (Hardware-Decodierer sind in der Regel am strengsten), insbesondere wenn bei der Wiedergabe esoterische Funktionen eines bestimmten Codecs verwendet werden. Zum Glück gibt es eine Vielzahl von Tools, die wir nutzen können.

Beim Debuggen von Fehlern bei der Medienwiedergabe sehen wir uns normalerweise zuerst das Attribut MediaError error für das HTML-Medienelement an. Dieses Attribut gibt Aufschluss über die Ursache des Fehlers bei der Medienwiedergabe. Das Attribut MediaError.code gibt einen numerischen Wert zurück, der die Art des Fehlers angibt, der bei einem Medienelement aufgetreten ist. Die andere Eigenschaft „MediaError.message“ stellt möglicherweise einen String mit Diagnoseinformationen aus dem Browser bereit.

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

Diese Attribute sind am nützlichsten für die Telemetrieanalyse und liefern möglicherweise nicht immer genügend Informationen zum Beheben von Wiedergabefehlern. Aus Datenschutzgründen muss der vollständige Fehlertext manchmal weggelassen werden.

Vollständige Fehlerinformationen können Sie in den Chrome-Entwicklertools unter Media Panel (Medienbereich) aufrufen. Sie finden dort zahlreiche Informationen wie Ereignisse, Warnungen und Fehlermeldungen, die Ihnen einige gute Hinweise auf Fehler bei der Medienwiedergabe geben.

Screenshot des Bereichs „Media Panel“ in den Chrome-Entwicklertools
Medienbereich in den Chrome-Entwicklertools.

Mithilfe des folgenden Befehls können Sie auch die kostenlose FFmpeg-Anwendung nutzen, um die Integrität von Mediendateien zu prüfen:

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

Im Folgenden sind einige Fehler aufgeführt, die Sie bei diesen Befehlen für eine Videodatei mit ungültigem Codec erhalten können:

[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

Der MP4Box.js / ISOBMFF Box Structure Viewer ist ein nützliches Tool zum Beheben von Bitstream-Problemen. Dafür musst du allerdings schon MP4-Kenntnisse haben.

Außerdem sind einige professionelle Tools zur Videostreamanalyse wie VQAnalyzer, Elecard StreamEye und Codecian CodecVisa Ihr Geld wert.