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ù rigorosi), soprattutto quando una riproduzione può utilizzare caratteristiche più esoteriche di un determinato codec. Fortunatamente per noi, ci sono una varietà di strumenti che possiamo sfruttare per aiutare.
Durante il debug degli errori di riproduzione di contenuti multimediali, la prima cosa che controlliamo solitamente è l'attributo MediaError error nell'elemento multimediale 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, talvolta è necessario omettere l'intero testo dell'errore.
Per accedere a informazioni complete sugli errori, utilizza il "Riquadro multimediale" di Chrome DevTools per visualizzare i log multimediali. Troverai molte informazioni quali eventi, avvisi e messaggi di errore che ti daranno qualche indizio sugli errori di riproduzione di 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 -
Di seguito sono riportati alcuni errori che potresti riscontrare con questi comandi in 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
Il visualizzatore struttura box MP4Box.js / ISOBMFF è uno strumento utile per eseguire il debug dei problemi relativi a bitstream. Per utilizzarlo, è necessario avere già familiarità con il formato MP4.
Infine, alcuni strumenti professionali di analisi dello stream video come VQAnalyzer, Elecard StreamEye e Codecian CodecVisa potrebbero valere il tuo denaro.