Una de las características más mencionadas de HTML5 fue la capacidad de procesar video.
El entusiasmo nada tenía que ver con las nuevas herramientas provistas por HTML5 para este propósito, sino más bien con el hecho de que desde los videos se volvieron una pieza esencial de Internet, todos esperaban soporte nativo por parte de los navegadores. Era como que todos conocían la importancia de los videos excepto aquellos encargados de desarrollar las tecnologías para la web.
Pero ahora que ya disponemos de soporte nativo para videos e incluso un estándar que nos permitirá crear aplicaciones de procesamiento de video compatibles con múltiples navegadores, podemos comprender que la situación era mucho más complicada de lo que nos habíamos imaginado. Desde codificadores hasta consumo de recursos, las razones para no implementar video de forma nativa en los navegadores eran mucho más complejas que los códigos necesarios para hacerlo.
A pesar de estas complicaciones, HTML5 finalmente introdujo un elemento para insertar y reproducir video en un documento HTML. El elemento <video> usa etiquetas de apertura y cierre y solo unos pocos parámetros para lograr su función. La sintaxis es extremadamente sencilla y solo el atributo src es obligatorio:
Código 5-1. Sintaxis básica para el elemento <video>.
<!DOCTYPE html> <html lang="es"> <head> <title>Reproductor de Video</title> </head> <body> <section id="reproductor"> <video src=”http://minkbooks.com/content/trailer.mp4” controls> </video> </section> </body> </html>
En teoría, el código del Código 5-1 debería ser más que suficiente. Repito, en teoría.
Pero como explicamos anteriormente, las cosas se vuelven un poco más complicadas en la vida real. Primero debemos proveer al menos dos archivos diferentes con formatos de video diferentes: OGG y MP4. Esto es debido a que a pesar de que el elemento <video> y sus atributos son estándar, no existe un formato estándar de video. Primero, algunos navegadores soportan un codificador de video que otros no, y segundo el codificador utilizado en el formato MP4 (el único soportado por importantes navegadores como Safari e Internet Explorer) se encuentra bajo licencia comercial.
Los formatos OGG y MP4 son contenedores de video y audio. OGG contiene codificadores de video Theora y de audio Vorbis, y los disponibles para el contenedor MP4 son H.264 para video y AAC para audio. En este momento OGG es reconocido por Firefox, Google Chrome y Opera, mientras que MP4 trabaja en Safari, Internet Explorer y también Google Chrome.
El elemento <video>
Intentemos ignorar por un momento estas complicaciones y disfrutar de la simplicidad del elemento <video>. Este elemento ofrece varios atributos para establecer su comportamiento y configuración. Los atributos width y height, al igual que en otros elementos HTML ya conocidos, declaran las dimensiones para el elemento o ventana del reproductor. El tamaño del video será automáticamente ajustado para entrar dentro de estos valores, pero no fueron considerados para redimensionar el video sino limitar el área ocupada por el mismo para mantener consistencia en el diseño. El atributo src especifica la fuente del video. Este atributo puede ser reemplazado por el elemento <source> y su propio atributo src para declarar varias fuentes con diferentes formatos, como en el siguiente ejemplo:
Código 5-2. Reproductor de video con controles por defecto y compatible con navegadores HTML5.
<!DOCTYPE html> <html lang="es"> <head> <title>Reproductor de Video</title> </head> <body> <section id="reproductor"> <video id="medio" width="720" height="400" controls> <source src="http://minkbooks.com/content/trailer.mp4"> <source src="http://minkbooks.com/content/trailer.ogg"> </video> </section> </body> </html>
En el Código 5-2, el elemento <video> fue expandido. Ahora, dentro de las etiquetas del elemento hay dos elementos <source>. Estos nuevos elementos proveen diferentes fuentes de video para que los navegadores puedan elegir. El navegador leerá la etiqueta <source> y decidirá cual archivo reproducir de acuerdo a los formatos soportados (MP4 u OGG).
Hágalo usted mismo: Cree un nuevo archivo HTML vacío con el nombre video.html (o cualquier otro nombre que desee), copie el código del Código 5-2, y abra el archivo en diferentes navegadores para comprobar el modo en que el elemento <video> trabaja en cada uno de ellos.
Atributos para <video>
Incluimos un atributo en la etiqueta <video> en los Código 5-1 y 5-2 que probablemente llamó su atención. El atributo controls es uno de varios atributos disponibles para este elemento. Éste, en particular, muestra controles de video provistos por el navegador por defecto. Cuando el atributo está presente cada navegador activará su propia interface, permitiendo al usuario comenzar a reproducir el video, pausarlo o saltar hacia un cuadro específico, entre otras funciones.
Junto con controls, también podemos usar los siguientes:
- autoplay :Cuando este atributo está presente, el navegador comenzará a reproducir el video automáticamente tan pronto como pueda.
- loop :Si este atributo es especificado, el navegador comenzará a reproducir el video nuevamente cuando llega al final.
- poster :Este atributo es utilizado para proveer una imagen que será mostrada mientras esperamos que el video comience a ser reproducido.
- preload :Este atributo puede recibir tres valores distintos: none, metadata o auto. El primero indica que el video no debería ser cacheado, por lo general con el propósito de minimizar tráfico innecesario. El segundo valor, metadata, recomendará al navegador que trate de capturar información acerca de la fuente (por ejemplo, dimensiones, duración, primer cuadro, etc…). El tercer valor, auto, es el valor configurado por defecto que le sugerirá al navegador descargar el archivo tan pronto como sea posible.
Código 5-3: Aprovechando los atributos del elemento <video>.
<!DOCTYPE html> <html lang="es"> <head> <title>Reproductor de Video</title> </head> <body> <section id="reproductor"> <video id="medio" width="720" height="400" preload controls loop poster="http://minkbooks.com/content/poster.jpg"> <source src="http://minkbooks.com/content/trailer.mp4"> <source src="http://minkbooks.com/content/trailer.ogg"> </video> </section> </body> </html>
En el Código 5-3, el elemento <video> fue poblado con atributos. Debido a las diferencias en comportamiento entre un navegador y otro, algunos atributos estarán habilitados o deshabilitados por defecto, y algunos de ellos incluso no trabajarán en algunos navegadores o bajo determinadas circunstancias. Para obtener un control absoluto sobre el elemento <video> y el medio reproducido, deberemos programar nuestro propio reproductor de video en Javascript aprovechando los nuevos métodos, propiedades y eventos incorporados en HTML5.
Espero haber ayudado en algo. Hasta la próxima oportunidad!
Twittear
No hay comentarios:
Publicar un comentario