Debugowanie elementów multimedialnych HTML, takich jak <video> i <audio>, może być trudne, ponieważ implementacje dekodera różnią się pod względem zakresu, w jakim są zaliczane do błędów (dekodery sprzętowe są zazwyczaj najbardziej rygorystyczne), zwłaszcza gdy w odtwarzaniu wykorzystywane są bardziej ezoteryczne funkcje konkretnego kodeka. Na szczęście istnieją różne narzędzia, które mogą nam w tym pomóc.
Pierwszą rzeczą, którą zwykle sprawdzamy podczas debugowania błędów odtwarzania multimediów, jest atrybut MediaError error elementu multimedialnego HTML. Ten atrybut zawiera ogólną wskazówkę o tym, co spowodowało błąd odtwarzania multimediów. Właściwość MediaError.code zwraca wartość liczbową, która reprezentuje rodzaj błędu, który wystąpił w elemencie multimedialnym. Druga właściwość MediaError.message może zawierać ciąg znaków z informacjami diagnostycznymi z przeglądarki.
const video = document.querySelector('video');
video.addEventListener('error', () => {
console.log('Error code: ' + video.error.code);
console.log('Error message: ' + video.error.message);
});
Właściwości te są przydatne podczas analizy danych telemetrycznych, ale nie zawsze zapewniają wystarczającą ilość informacji do debugowania błędów odtwarzania. Ze względu na ochronę prywatności należy czasem pominąć pełny tekst błędu.
Aby uzyskać pełne informacje o błędach, otwórz Panel multimediów w Narzędziach deweloperskich w Chrome i wyświetl dzienniki multimediów. Znajdziesz tam wiele informacji, takich jak zdarzenia, ostrzeżenia i komunikaty o błędach, dzięki którym dowiesz się więcej o błędach odtwarzania multimediów.
Możesz też użyć bezpłatnej aplikacji FFmpeg, aby sprawdzić integralność plików multimedialnych za pomocą tego polecenia:
ffmpeg -err_detect explode -i <file> -f null -
Oto kilka błędów, które mogą wystąpić po wykonaniu tych poleceń w przypadku pliku wideo z nieprawidłowym kodekiem:
[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
przeglądarka plików MP4Box.js / ISOBMFF Box Structured Viewer służy do debugowania problemów ze strumieniem bitowym. Jednak jego obsługa wymaga znajomości formatu MP4.
I na koniec warto skorzystać z profesjonalnych narzędzi do analizy strumieni wideo, takich jak VQAnalyzer, Elecard StreamEye czy Codecian CodecVisa.