Il debug di elementi multimediali HTML, come <video> e <audio>, può essere difficile perché le implementazioni del decoder variano in ciò che considerano errori (i decoder hardware sono in genere i più rigidi), soprattutto quando una riproduzione potrebbe utilizzare funzioni più esoteriche di un particolare codec. Fortunatamente, per noi, esistono diversi strumenti che possiamo sfruttare.
Durante il debug degli errori di riproduzione dei contenuti multimediali, la prima cosa che controlliamo è l'attributo MediaError error nell'elemento multimediale HTML. Questo attributo è un suggerimento generale relativo alla 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 potrebbe fornire una stringa con alcune informazioni diagnostiche del 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 di telemetria e potrebbero non fornire sempre informazioni sufficienti per eseguire il debug degli errori di riproduzione. Per motivi di privacy, talvolta il testo di errore completo deve essere omesso.
Per accedere alle informazioni complete sull'errore, utilizza il "Media Panel" di Chrome DevTools per visualizzare i log multimediali. Troverai molte informazioni, quali eventi, avvisi e messaggi di errore, che ti daranno degli indizi positivi sugli errori di riproduzione dei contenuti multimediali.
Puoi anche utilizzare l'applicazione senza costi FFmpeg per verificare l'integrità dei file multimediali grazie a questo comando:
ffmpeg -err_detect explode -i <file> -f null -
Ecco alcuni errori che potresti ottenere 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 Structured Viewer è uno strumento utile per il debug dei problemi relativi al bitstream. Per usarlo è necessario avere già familiarità con il formato MP4.
Infine, alcuni strumenti professionali per l'analisi dei video stream, come VQAnalyzer, Elecard StreamEye e CodecVisa CodecVisa, potrebbero valere la pena.