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

22/Ene/2012 HTML5 , 4 Comentarios

¿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.

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:

  1. <video id="mivideo" controls>
  2. <source src="videonoexiste.ogv" type="video/ogg"></source>
  3. Tu navegador no soporta el elemento <code>video</code>
  4. </video>

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

  1. v.addEventListener("error",function(ev){
  2. alert("Error");
  3. },true);

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:

  1. v.addEventListener("error",function(ev){
  2. logError("Error en el vídeo");
  3. if (ev.currentTarget.networkState == ev.currentTarget.NETWORK_NO_SOURCE){
  4. logError("No encontrado el origen del vídeo");
  5. }
  6. },true);

Vídeos sobre HTML5


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Controlar un error de carga de un vídeo en HTML5”

Víctor Cuervo

Víctor Cuervo

@Edith, me alegro que te haya servido. 🙂

Víctor Cuervo

Edith

Excelente aporte. ¡Muchísimas gracias!

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*