Cómo depurar errores de reproducción de contenido multimedia en la Web

François Beaufort
François Beaufort

La depuración de elementos multimedia HTML, como <video> y <audio>, puede ser difícil, ya que las implementaciones de decodificador varían en lo que consideran errores (los decodificadores de hardware suelen ser los más estrictos), en especial cuando una reproducción puede usar características más esotéricas de un códec particular. Por suerte, existen diversas herramientas que podemos aprovechar para ayudarte.

Cuando depuramos errores de reproducción de contenido multimedia, lo primero que comprobamos es el atributo MediaError error en el elemento multimedia HTML. Este atributo es una sugerencia de alto nivel de lo que causó el error de reproducción de contenido multimedia. La propiedad MediaError.code muestra un valor numérico que representa el tipo de error que ocurrió en un elemento multimedia. La otra propiedad MediaError.message podría proporcionar una cadena con información de diagnóstico del navegador.

const video = document.querySelector('video');
video.addEventListener('error', () => {
  console.log('Error code: ' + video.error.code);
  console.log('Error message: ' + video.error.message);
});

Estas propiedades son más útiles para el análisis de telemetría y es posible que no siempre proporcionen información suficiente para depurar errores de reproducción. Por motivos de privacidad, a veces se debe omitir el texto completo del error.

Para acceder a la información completa del error, usa el "Panel multimedia" de las Herramientas para desarrolladores de Chrome para ver los registros multimedia. Encontrarás mucha información, como eventos, advertencias y mensajes de error, que te darán una idea clara de los errores de reproducción de contenido multimedia.

Captura de pantalla del panel Media Panel en las Herramientas para desarrolladores de Chrome
Panel multimedia de las Herramientas para desarrolladores de Chrome.

También puedes usar la aplicación gratuita FFmpeg para verificar la integridad de archivos multimedia gracias al siguiente comando:

ffmpeg -err_detect explode -i <file> -f null -

A continuación, te mostramos algunos errores que podrían producirse con estos comandos en un archivo de video con un códec no válido:

[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

El Visor de estructura de cuadro de MP4Box.js / ISOBMFF Box es una herramienta útil para depurar problemas de flujo de bits. Sin embargo, es necesario entender el formato MP4 para usarlo.

Por último, algunas herramientas profesionales de análisis de transmisiones de video por Internet, como VQAnalyzer, Elecard StreamEye y Codecian CodecVisa, pueden valer tu dinero.