Cada vez son más las páginas web creadas con HTML5 y que utilizan la etiqueta video de HTML5 para mostrar los vídeos. Pero, ¿qué sucede con los navegadores web que no saben interpretar todavía esta etiqueta? Pues que no pueden visualizar el vídeo. En este artículo vamos a ver cómo podemos modificar el código HTML de nuestra web, de modo que utilice diferentes versiones del vídeo según el navegador y que en caso de que no dé soporte a la etiqueta video de HTML5 muestre la alternativa en Flash.
FORMATOS DE VÍDEO Y NAVEGADORES
Como comentaba, los diferentes navegadores no parecen ponerse de acuerdo con los formatos de vídeo, por lo que para asegurarnos que nuestro vídeo se vea correctamente en los diferentes navegadores, es recomendable utilizar diferentes formatos. Con el programa Format Factory podremos cambiar los formatos de nuestros archivos de audio y vídeo con gran facilidad.
.OGG: Tal y como podemos comprobar en el portal de desarrollo de Mozilla, Firefox no da soporte al formato mp4, por lo que es recomendable utilizar el formato .OGG para Firefox.
.MP4: Este formato es ideal para Chrome y Safari, y permitirá que se vea el vídeo en dispositivos móviles como iPhone que no dan soporte a Flash.
.SWF: Como no todos los navegadores dan soporte a HTML5, al añadir esta opción los navegadores que no sepan interpretar la etiqueta video de HTML5 mostrarán el vídeo en Flash.
CÓDIGO HTML5
Veamos ahora el código HTML5 que deberíamos utilizar:
05 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
06 | <title>untitled</title> |
09 | <video controls width="650"> |
11 | <source src="video.ogg" type="video/ogg" /> |
13 | <source src="video.mp4" type="video/mp4" /> |
15 | <embed src="video.swf" type="application/x-shockwave-flash" width="650"height="300" allowscriptaccess="always" allowfullscreen="true"></embed> |
Si queremos que el vídeo se muestre correctamente en los diferentes navegadores, entonces es recomendable que habilitemos los tres formatos del vídeo, porque de otro modo surgirán incompatibilidades.
Fuente: enlace
No hay comentarios:
Publicar un comentario