Il debug di elementi multimediali HTML, come <video> e <audio>, può essere difficile perché le implementazioni dei decoder variano in ciò che considerano errori (i decoder hardware in genere sono i più rigidi), soprattutto quando una riproduzione può utilizzare caratteristiche più esoteriche di un determinato codec. Fortunatamente, esistono una varietà di strumenti che possiamo sfruttare.
Quando esegui il debug degli errori di riproduzione dei contenuti multimediali, la prima cosa che di solito controlliamo è l'attributo MediaError error nell'elemento media HTML. Questo attributo è un suggerimento generale della causa dell'errore di riproduzione dei contenuti multimediali. La proprietà MediaError.code restituisce un valore numerico che rappresenta il tipo di errore che si è verificato su un elemento multimediale. L'altra proprietà MediaError.message può fornire una stringa con alcune informazioni diagnostiche fornite dal browser.
const video = document.querySelector('video');
video.addEventListener('error', () => {
console.log('Error code: ' + video.error.code);
console.log('Error message: ' + video.error.message);
});
Queste proprietà sono particolarmente utili per l'analisi della telemetria e potrebbero non fornire sempre informazioni sufficienti per eseguire il debug degli errori di riproduzione. Per motivi di privacy, a volte il testo completo dell'errore deve essere omesso.
Per accedere a informazioni complete sugli errori, utilizza il "Pannello multimediale" di Chrome DevTools per visualizzare i log multimediali. Troverai molte informazioni, come eventi, avvisi e messaggi di errore, che ti daranno alcuni buoni suggerimenti sugli errori di riproduzione dei contenuti multimediali.
Puoi anche utilizzare l'applicazione gratuita FFmpeg per controllare l'integrità dei file multimediali grazie a questo comando:
ffmpeg -err_detect explode -i <file> -f null -
Ecco alcuni errori che potresti ricevere con questi comandi per un file video con codec non valido:
[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 è uno strumento utile per il debug dei problemi relativi al flusso di bit. Tuttavia, è necessario conoscere già MP4 per utilizzarlo.
Infine, alcuni strumenti professionali di analisi dello stream video come VQAnalyzer, Elecard StreamEye e Codecian CodecVisa potrebbero valere il tuo denaro.