martes, 19 de julio de 2011

Etiquetas <audio> y <video> Implementación básica, ventajas y desventajas del reproductor de audio y video de HTML5

Aunque todavía Internet no está totalmente lista para ellas, todos los navegadores punteros ya las soportan, además de nuevas plataformas como Ipad y Iphone, las etiquetas de HTML5 <audio> y <video> son una gran manera de ahorrar trabajo y evitar el uso de flash, pero debido a la falta de acuerdos entre los desarrolladores de los navegadores, son dos propiedades que nacen con una desventaja con respecto a Flash y que hace obligatorio tener hasta versiones de un mismo contenido debido a que unos navegadores no dan soporte a codecs que otros navegadores de la competencia algo evidente entre la implementacion de los estándares H.264 de Microsoft-Apple y WebM de Google.

Agregar video mediante < video>
El planteamiento básico para una etiqueta de video sería:
<video width="360" height="280" controls="controls" src="video.mp4" poster="imagenprevia.jpg" preload="metadata" >
Su navegador no soporta HTML5
</video>
  1. controls hace que aparezcan los controles.
  2. src es la dirección del video.
  3. poster es la imagen que será la vista previa.
  4. height y width determinan el tamaño del video (Sin soporte de ajuste).
  5. preload="metadata" evita que el video se cargue con la página, solamente los controles, hasta que se pulsa el botón play.
  6. Entre <video> y </video> se puede poner un mensaje o un código alternativo (para Flash o Silverlight) cuando no se ejecute el contenido como pasa con la etiqueta <noscript>.
  7. Pueden ver más atributos aquí.
El resultado será que solamente en Internet Explorer o Chrome funcionará, en Firefox aparecerá un espacio vacio en el reproductor.

Etiqueta <source>
Para solventar esto podemos podemos usar dentro de video la etiqueta <source> para cargar alternativas, mediante el atributo src="video.formato", esto significa que dependiendo del navegador, este elegirá uno u otro archivo:
<video width="320" height="240" controls="controls" poster="imagenprevia.jpg" preload="metadata" >
<source src="video.ogg" type="video/ogg" />
<source src="video.mp4" type="video/mp4" />
Su navegador no soporta HTML5
</video>
Generalmente con mp4, mp3, ogv y ogg, daremos soporte a la mayoría de los navegadores, pero no a todos, algunos podrían requerir de WebM que tendríamos que agregar una tercera etiqueta source <source src="video.webm" type="video/mp4" /> -especialmente en los dispositivos móviles con android-, sin embargo, aquellos que han aceptado implementar WebM, también tiene soporte para Theore/Vorbis (ogg/ogv)

*Nota: múltiples etiquetas <source> no son soportadas en Iphone y Ipad, salvo la primera, por tanto es recomendable poner en primer lugar los archivos de mpeg-4 y mpeg-3 de H.264

<source> y tipos MIME
En source además del la dirección del archivo debemos especificar el tipo MIME de formato con el atributo type="video/formato" para los videos y type="audio/formato" para los audios.
Como ya se dijo existen tres estándares y cada uno soporta un formato diferente H.264 (mp4, mp3 y acc), THEORA/Vorbis (ogg y ogv) y WEBM (WebM)

Tipos en video:
type="video/ogg"
type="video/webm"
type="video/mp4"
Tipos en audio:
type="audio/ogg"
type="audio/mpeg"
type="video/webm"
El resultado será que tanto en Firefox 4, IE 9 y Chrome 12 veremos el siguiente video, aunque los controles varían de uno a otro:
Pulsa en la imagen para lanzar el ejemplo
Agregar video mediante <Audio>
El planteamiento básico para una etiqueta de audio es mucho más sencilla [Más atributos aquí]:
<audio controls="controls" src="audio.mp3" preload="metadata" >
Su navegador no soporta HTML5
</audio>
Sin embargo, nuevamente los mp3 no se podrán escuchar en Firefox por lo que tendremos que poner un archivo de audio en formato ogg.
<audio controls="controls" preload="metadata">
<source src="audio.ogg" type="audio/ogg" />
<source src="audio.mp3" type="audio/mpeg" />
Su navegador no soporta HTML5
</audio>
El resultado será que tanto en Firefox 4, IE 9, Opera, Safari y Chrome 12 reproduciremos el siguiente audio:
Pulsa en la imagen para lanzar el ejemplo
Otros navegadores sin soporte HTML5
Para los navegadores antiguos o sin soporte para html5 podemos usar html5media, solamente se agrega entre <head> y </head> que usa Flowplayer para cargar en flash el video o audio.
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
Ventajas de HTML5:
  • Cualquiera puede implementar de forma fácil y práctica videos y audios.
  • Se puede modificar el comportamiento del video mediante Javascript.
  • Podemos crear nuestros propios controles mediante Javascript.
  • Podemos aumentar el soporte de <video> y <audio> mezclándolo con Flash.
  • Soportes gratuitos de conversión a WEB-M, H.254 y THEORA
Desventajas HTML5:

Soporte dividido
Diferentes navegadores soportan diferentes Codecs estandar de H.264 (mp4, mp3 y acc), THEORA/Vorbis (ogg y ogv) y WEBM (webm)

Diseño
El diseño del navegador no es estandarizado y si se quieren acciones avanzadas en los controles como pantalla completa y ajuste de relación de aspecto, se debe tener un javascript que provea estas funciones, no hay atributos que las provean.

Para rematarla, algunos navegadores no implementan correctamente la carga del reproductor, por lo que algunos botones son poco "usables" o interactivos en especial en Chrome.

Tamaño
Si tienes un sitio web convencional con hosting propio, resulta una locura almacenar dos o tres archivos en formatos distintos de un mismo audio o video, que de todas formas requerirá flash para dar todo su potencial, muchas veces es mejor usar un reproductor flash, debido a que no es una etiqueta madura, Sin embargo si el destino es para dispositivos portátiles como Ipad, Iphone, Android quizás sea la única forma de ofrecer video y audio.

Atributos parcialmente implementados
Por ejemplo, Chrome no maneja correctamente preload="metadata" y cargará todo el contenido con los metadatos en vez de solo los metadatos (controles e imagen previa), Internet Explorer al usar preload="none" ocultará los controles de reproducción, siendo necesario dar clic derecho y en Reproducir, cada vez que recarguemos la página en Chrome pasaremos por el mismo proceso de carga de los datos una y otra vez si no implementamos javascript.

Streaming pobremente implementado
El streaming tiene el inconveniente de usar todo el ancho de banda de tu conexión, mientras un streaming normal solamente lo requerido por la cache. En HTML5 se tiene que cargar una y otra vez un video para escucharlo nuevamente, a menos que este sea almacenado en el mismo dominio o mediante Javascript.

Conclusiones
< video> y <audio>, no son una panacea para incluir material audiovisual, diversos problemas quizás no se resuelvan nunca, especialmente sus defectos en el soporte de codecs debido a intereses de sus desarrolladores y los costos de las licencias que genera el empleo de los mismos en navegadores web.

También su uso con flash presenta diversos problemas de compatibilidad y que en muchos casos obligan al empleo de Javascript para solventarlos, convirtiendo estas características nodales en HTML5 en secundarias y por regla general poco recomendables.

*Este artículo es una evaluación parcial e incompleta, contiene o puede contener diversos errores en el manejo e interpretación de las etiquetas < video> y <audio>, es susceptible de ser ampliado y/o mejorado.

Recursos

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

1 comentarios:

  1. Excellent pieces. Keep posting such kind of information on your blog. I really impressed by your blog.
    html5 media player

    ResponderEliminar

Samurai Jack (2017), episodio 7

Samurai Jack (2017)Ashi enfrenta a su madre, Jack a su yo interior lleno de ira.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com