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 anders als Fehler eingestuft werden (Hardware-Decodierer sind in der Regel am strengsten), insbesondere wenn eine Wiedergabe esoterischere Funktionen eines bestimmten Codecs verwendet. Glücklicherweise gibt es verschiedene Tools, die wir nutzen können.

Beim Beheben von Fehlern bei der Medienwiedergabe prüfen wir in der Regel zuerst das Attribut MediaError error im HTML-Mediaelement. Dieses Attribut gibt einen allgemeinen Hinweis auf die Ursache des Fehlers bei der Medienwiedergabe. Die Property MediaError.code gibt einen numerischen Wert zurück, der die Art des Fehlers darstellt, der bei einem Medienelement aufgetreten ist. Die andere Eigenschaft MediaError.message stellt möglicherweise einen String mit Diagnoseinformationen des Browsers bereit.

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

Diese Properties sind am besten für die Analyse von Telemetry-Daten geeignet und enthalten möglicherweise nicht immer genügend Informationen, um Wiedergabefehler zu beheben. Aus Datenschutzgründen muss der vollständige Fehlertext manchmal ausgelassen werden.

Vollständige Fehlerinformationen finden Sie im Medienbereich in den Chrome-Entwicklertools. Dort können Sie Medienprotokolle aufrufen. Sie finden dort viele Informationen wie Ereignisse, Warnungen und Fehlermeldungen, die Ihnen Hinweise auf die Fehler bei der Medienwiedergabe geben.

Screenshot des Medienbereichs in den Chrome-Entwicklertools
Medienbereich in den Chrome-Entwicklertools

Mit dem folgenden Befehl können Sie auch die kostenlose Anwendung FFmpeg verwenden, um die Integrität von Mediendateien zu prüfen:

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

Hier sind einige Fehler, die bei diesen Befehlen für eine Videodatei mit ungültigem Codec auftreten 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 zur Behebung von Bitstream-Problemen. Für die Verwendung ist jedoch ein gewisses Verständnis von MP4 erforderlich.

Zu guter Letzt sind einige professionelle Tools zur Videostreamanalyse wie VQAnalyzer, Elecard StreamEye und Codecian CodecVisa für Ihr Geld möglicherweise wert.