Controlar un error de carga de un vídeo en HTML5

¿Por qué cuando se carga mi página web en HTML5 no se ve el vídeo? ¿Cómo puedo controlar un error de carga de un vídeo en HTML5? Estas pueden ser algunas de las preguntas que nos hagamos cuándo vemos que nuestros vídeos no están funcionando.

Suscribirse al evento error

Si queremos controlar un error en un elemento de vídeo en HTML5 lo primero que tenemos que hacer es suscribirnos al evento error del vídeo. Para ello utilizaremos un escuchador o addEventListener sobre el elemento HTMLMediaElement que represente nuestro vídeo.

Así, si nuestro vídeo es:

<video id="mivideo" src="tecla.ogv" controls>
</video>

Implementar el controlador de errores

Para suscribirnos al evento error del vídeo lo haremos mediante la siguiente línea de código:

document.getElementById('mivideo').addEventListener('error', function() {
  alert('Error al cargar el vídeo');
}, true);

Analizar el tipo de error con networkState

Cuando salte un error sobre el vídeo se ejecutará el contenido de la función. Pero si queremos ser más concretos en el análisis del error podemos comprobar el valor de la variable networkState. Esta variable representa la interacción entre el vídeo y la red.

Si el valor de networkState es igual NETWORK_NO_SOURCE eso significa que no se ha podido encontrar el origen del vídeo. Así modificaremos el código de nuestra gestión de errores para controlar un error de carga de un vídeo en HTML5:

document.getElementById('mivideo').addEventListener('error', function() {
  if (document.getElementById('mivideo').networkState === [HTMLMediaElement.NETWORK](http://htmlmediaelement.network/)_NO_SOURCE) {
    alert('No se ha podido encontrar el origen del vídeo');
  } else {
    alert('Error al cargar el vídeo');
  }
}, true);