Cómo embeber videos usando HTML5

En estos momentos existe un gran debate público, entre las grandes empresas de software, sobre la eficacia de presentar videos usando HTML5 en vez de Flash; sin embargo, viene cobrando impulso tras el respaldo de la estandarización web.

Los sitios de video gigantes en internet, desde YouTube hasta la Wikipedia, han empezado a reproducir sus videos tanto en Flash como en sus formatos nativos. Microsoft también ha anunciado que va a apoyar la etiqueta de video de HTML5 en Internet Explorer 9; por lo que se espera, que muchos sitios abandonen Flash por el video nativo.

Así pues, si uno quiere divertirse y quiere utilizar las etiquetas de video de HTML5 en su sitio web en este momento, puede hacerlo. En este artículo vamos a darle una mirada al maravilloso mundo del video en HTML5...

Compatibilidad con exploradores de HTML5

En primer lugar, vamos a observar que navegadores trabajan con HTML5 y cuales no, en el siguiente cuadro:

Así, podemos apreciar que sólo las versiones recientes de la mayoría de navegadores soportan la reproducción de video nativo con la etiqueta <video> de HTML5.

Dado que Firefox 3.0 e IE 7 y 8 carecen de soporte para HTML5, tendrán que idear un plan alternativo para servir videos a sus usuarios. Dependiendo de lo que se quiere hacer, se podría utilizar a QuickTime, o en su defecto, a Flash. Esa es la estrategia usada en Video For Everyone (fíjense que desde la v0.4, Video for everyone no utiliza QuickTime).

Formatos, codecs y aspectos técnicos

Lo siguiente que necesitamos conocer es lo referente a la carga y reproducción de video en el navegador. Seguramente, ya estaremos acostumbrados a pensar en formatos de video como .MP4 o .MOV, pero desafortunadamente no es tan sencillo. Los formatos de video mencionados son sólo contenedores, hay que pensar en ellos como si fueran archivos .ZIP; es decir, archivos que contienen otros archivos dentro.

Cada contenedor tiene, como mínimo, una pista de video y, lo más probable, una pista de audio. Cuando uno ve una película en línea, el reproductor de video (Flash es el más probable) decodifica tanto el audio como el video y envía la información a la pantalla y parlantes del PC.

¿Y esto por qué es importante? Bueno, porque el proceso de decodificación, de lo que hay dentro del archivo contenedor de video, varía. Para saber cómo decodificar una película, el reproductor (que es el navegador web en el caso de video HTML5) tiene que saber con que codec de video se ha codificado.

Cuando se trata de vídeo online hay dos codecs principales: H.264 y Theora.

Hay una gran disputa en estos momentos entre los desarrolladores web, fabricantes de navegadores y el resto de usuarios en determinar cual es el codec adecuado para la web. Creemos que un codec libre, abierto, sin restricciones de licencia ni patentes, es la mejor solución para la web. Lamentablemente, en este momento no se cumple exactamente este sueño; así que por ahora, vamos a saltarnos el argumento y ser prácticos, vamos a usar ambos codecs.

¿Por qué? Bueno, echemos un vistazo a la tabla de abajo, que muestra los codecs existentes y los navegadores que trabajan con ellos. Sólo Google Chrome puede reproducir tanto H.264 cómo Ogg Theora.

Soporte de Codec por Navegador/Plataforma

Así pues, podríamos pensar que si HTML5 no tiene soporte en IE7 ni IE8, y vamos a tener que codificar nuestros videos 2 veces para el resto de navegadores, entonces ¿para qué dejar a flash? Bueno, la respuesta es simple: Los usuarios móviles. Si deseas que los usuarios del iPhone y Android puedan ver un video, HTML5 es la única manera de hacerlo (aunque el soporte para Flash ya llega a Android). Todos sabemos que Flash no se puede ejecutar en el iPhone ni iPad.

La etiqueta HTML5

Ahora veamos la manera efectiva de integrar nuestros videos a una página web. En primer lugar, hay que codificarlos en los dos tipos de contenedores .OGV y .MP4. Codificar videos escapa al interés de este artículo, por lo que podemos leer algo al respecto en el libro online de Pilgrim Dive Into HTML5, el que tiene un capítulo completo dedicado a entender la codificación de videos. Pero, una vez con nuestros archivos de video debidamente codificados en ambos formatos, esta es la manera correcta de etiquetarlos:

Eso es todo. Lo que estamos haciendo es usar la etiqueta <video> para especificar las dimensiones de nuestro video y dentro hemos añadido dos etiquetas <source> con el enlace a cada uno de los videos.

El atributo “type” de la etiqueta <source> ayuda al navegador a entender que archivo debe cargar. Es un poco feo que tengamos que especificar el formato del contenedor, el codec del video y el codec del audio; pero hay que hacerlo.

Y así ya tenemos nuestro video embebido en la web, sin requerir ningún plugin.

Lidiando con el resto

¿Qué pasa con IE7, IE8 y versiones anteriores de casi todos los navegadores? Bueno, para esos usuarios vamos a recurrir a Flash. Para ello, usamos la etiqueta <embed> dentro de nuestra etiqueta “video”:

Así pues, cualquier navegador que no entienda la etiqueta HTML5 sólo continuará su camino hasta que choque con la etiqueta <object>. Noten que el orden es MP4 antes de OGV, es importante para el soporte del iPad, Apple requiere que el mp4 sea el primer archivo de video.

Por supuesto, para que esto funcione necesitamos un contenedor del video en flash. JW Player es uno de los más populares, o podemos crearnos uno con las herramientas de Adobe.

Conclusiones

Embeber video en HTML5 no es significativamente más dificil que Flash, especialmente si venimos usando videos H.264 en nuestro flash player (lo cual hace exactamente YouTube con su versión beta de HTML5).

Si se animan a usar video HTML5, asegurense de chequear el SublimeVideo player, el cual ofrece un bonito reproductor en JavaScript con una variedad de controles y personalización.

Vía | webmonkey