Le débogage des éléments multimédias HTML, tels que <video> et <audio>, peut s'avérer difficile, car les implémentations de décodeur varient en ce qui concerne les erreurs (les décodeurs matériels sont généralement les plus stricts), en particulier lorsqu'une lecture peut utiliser des fonctionnalités plus ésotériques d'un codec particulier. Heureusement pour nous, nous pouvons utiliser une variété d'outils pour nous aider.
Lors du débogage des erreurs de lecture de contenus multimédias, la première chose que nous vérifions généralement est l'attribut MediaError error de l'élément multimédia HTML. Cet attribut donne une idée générale de la cause de l'erreur de lecture du contenu multimédia. La propriété MediaError.code renvoie une valeur numérique représentant le type d'erreur qui s'est produite au niveau d'un élément multimédia. L'autre propriété MediaError.message peut fournir une chaîne avec certaines informations de diagnostic issues du navigateur.
const video = document.querySelector('video');
video.addEventListener('error', () => {
console.log('Error code: ' + video.error.code);
console.log('Error message: ' + video.error.message);
});
Ces propriétés sont particulièrement utiles pour l'analyse de télémétrie. Il est possible qu'elles ne fournissent pas toujours suffisamment d'informations pour déboguer les erreurs de lecture. Pour des raisons de confidentialité, le texte d'erreur complet doit parfois être omis.
Pour accéder à des informations complètes sur les erreurs, utilisez le panneau multimédia des outils pour les développeurs Chrome afin d'afficher les journaux multimédias. Vous y trouverez de nombreuses informations, telles que des événements, des avertissements et des messages d'erreur, qui vous donneront des indications précises sur les erreurs de lecture de contenus multimédias.
Vous pouvez également utiliser l'application sans frais FFmpeg pour vérifier l'intégrité des fichiers multimédias à l'aide de la commande suivante:
ffmpeg -err_detect explode -i <file> -f null -
Voici quelques erreurs que vous pouvez rencontrer avec ces commandes pour un fichier vidéo dont le codec n'est pas valide:
[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
La visionneuse de structure MP4Box.js / ISOBMFF est un outil utile pour déboguer les problèmes de flux de bits. Cependant, vous devez déjà comprendre le format MP4 pour l'utiliser.
Enfin, certains outils professionnels d'analyse de flux vidéo, tels que VQAnalyzer, Elecard StreamEye et Codecian CodecVisa, peuvent s'avérer utiles.