Video en HTML5

Luego de leer un excelente artículo sobre estos temas me dieron ganas de escribir al respecto, al menos para probar un poco del tag VIDEO de HTML5 que tanto se ha ido mencionando en el ambiente de desarrollo web y que pocos estan usando todavía.

Justamente este post es para aquellos que utilizan un browser moderno, y cuando digo moderno me refiero a, en algunos casos, experimentales, como Fireofx 4 Beta 7 o el recientemente lanzado Chrome 8, son browsers muy nuevos y que todavía no conforman la mayoría.

Para aquellos que no entienden de que se trata, un breve repaso, hasta ahora ver un video en la web significa que el browser tiene que llamar a un plugin o aplicación externa para hacerlo, un "objeto" extraño que se mete entre el browser y vos para mostrarte algo tan básico como un video o un audio.

La adopción de HTML5 agrega dos nuevos tags, AUDIO y VIDEO justamente para suplir este hueco y que el mismo browser pueda integrar correctamente el video. En poco tiempo tendremos a Youtube con todos sus videos en WebM, el formato propuesto por ellos, pero he aquí el problema, no todos los browsers usarán el mismo codec/container para sus navegadores ¡que rompehuevos! así es, lo discutimos varias veces en el blog cuando Apple y Nokia insistieron en no definir el formato default cuando definían HTML5, así que pasamos de un draft con el OGG/Theora a uno que no dice nada sobre este combo indispensable.

Adentro del post les cuento como se puede "resolver" esto para el usuario, no para nosotros, claro :P



Lidiar con más de un formato implica codificar el video en varios, así es, cito la siguiente tabla de "Dive in to HTML5" para que se entienda

Video codec support in upcoming browsers
Codecs/containerIEFirefoxSafariChromeOperaiPhoneAndroid
Theora+Vorbis+Ogg·3.5+5.0+10.5+··
H.264+AAC+MP49.0+·3.0+5.0+·3.0+2.0+
WebM 9.0+*4.0+6.0+10.6+·
* Internet Explorer 9 will only support WebM “when the user has installed a VP8 codec,” which implies that Microsoft will not be shipping the codec themselves.
† Safari will play anything that QuickTime can play, but QuickTime only comes with H.264/AAC/MP4 support pre-installed.
‡ Google has committed to supporting WebM “in a future release” of Android, but there’s no firm timeline yet.


Es decir, desde el vamos tenemos que pensar no en uno si no en hasta tres archivos de nuestro video, algo que sin la presión corporativa de Apple y Nokia se podría haber evitado. Recordemos que ambos apoyan a H.264 el nefasto consorcio que junta cientos de patentes y dicen que nadie más que ellos tiene todas las patentes para comprimir video, un monopolio de patentes conformado por varias empresas.

OGG/Theora/Vorbis era el gran dolor de cabeza para este consorcio y lograron meter presión en la W3C para complicarnos la vida e intentar forzar al mundo a pagarles royalties por sus patentes.

Ahora bien, aun así podemos preparar videos, con el VLC se pueden convertir a todos los formatos, cada uno tiene su propia configuración posible y el resultado es bien distinto, principalmente en los tamaños de archivo.

Me tomé el trabajo de subirlo en tres formatos que cubrirían lo necesario de la tabla, OGV, WebM y MP4, con eso deberíamos poder ser vistos en el 90% de los browsers modernos sin problemas, me reservo el 10% para los móviles, pero si mañana todos actualizacen por los más modernos no habría problemas con esos tres formatos y lograríamos algo: no depender en absoluto del Flash Player.

Este es uno de los mayores objetivos, al no depender de un software hecho por un tercero encontrar los bugs y mejorar la performance es más fácil para desarrollos de código abierto como Firefox o Chromium.

También lo es para aquellos que desarrollan de forma privativa, Internet Explorer, Safari, Opera, todos tendrán mejor soporte de video gracias a esto y no dependerán de Adobe.

El uso del tag es bastante sencillo, aquí un ejemplo funcional:



Pero para aquellos que quieran algo que les resuelva todo junto pueden usar el genial VideoJS que resume todo esto, controles y soporte para browsers viejos, es decir, se puede agregar tranquilamente la reproducción en flash por si los tres formatos nuevos fallan.

Igualmente, como este post lo escribo para diseñadores web o interesados, para ver el código de lo de arriba tan sólo usen su querido browser y mírenlo, tiene varias partes, no voy a entrar en detalles, esos se los dejo en un par de links abajo, lo interesante es que en un mismo código puse: 3 sources a videos en MP4, OGV y WEBM en un mismo lugar, un "object" con un reproductor Flash para los browsers viejos y una última línea para poder descargarse el video en caso de que todo falle.

El "preload" en el tag video permite que mientras entran al post el browser ya comience a cargarlo, el "controls" te da los controles básicos del browser (es javascript, se puede jugar con ellos)

Un detalle, en varios sistemas falla el orden, es decir, si en un iPhone 3GS quieren ver el video y no está puesto en primer orden el MP4 no podrá verse el video, eso lo arreglaron en el iOS4 pero en toda versión anterior hay fallas. Claro, esto sólo aplica a unos pocos teléfonos.

Mi recomendación es usar el genial VideoJS, tiene skins hasta para parecerse a Youtube o Vimeo o cualquier otra cosa que puedas hacer en CSS, se integra perfecto con JQuery, Wordpress, etc. y la lista de browsers soportados es enorme. Pero lo importante es justamente esta customización que podés hacer con CSS para que tu sitio web tenga su reproductor independiente.

Para leer más en detalle les dejo dos artículos muy buenos:

HTML5 Audio and Video: What you Must Know
Video on the Web

¿Alguno de uds ya se puso a jugar con el tag VIDEO?

Categoría: Programación Etiquetas:  audio flash html5 mp4 ogg ogv video webm
Otros posts que podrían llegar a gustarte...

Comentarios

  • En Firefox 3.6 se ve bien... por momentos con un poco de ruido. Pero se ve perfectamente.

    • Responder
    • Citar
    • Comentado:
  • Ezequiel    

    Funciona bárbaro en Opera 10.63. Me copié el código y lo puse en una página aparte. Efectivamente el type="video/mp4" no va en el Opera.

    • Responder
    • Citar
    • Comentado:
  • Ale Sarco    

    No me quedó en claro este párrafo:
    <em>OGG/Theora/Vorbis era el gran dolor de cabeza para este consorcio y lograron meter presión en la W3C para complicarnos la vida e intentar forzar al mundo a pagarles royalties por sus patentes.
    </em>

    Quiénes metieron presión? OGG/Theora/Vorbis, o H.264? A cuál de los dos hay que pagarle royalties?

    • Responder
    • Citar
    • Comentado:
  • Fabio    


    Ale Sarco dijo:

    No me quedó en claro este párrafo:
    <em>OGG/Theora/Vorbis era el gran dolor de cabeza para este consorcio y lograron meter presión en la W3C para complicarnos la vida e intentar forzar al mundo a pagarles royalties por sus patentes.
    </em>

    Quiénes metieron presión? OGG/Theora/Vorbis, o H.264? A cuál de los dos hay que pagarle royalties?


    OGG es libre igual que Theora, el que es pago es H.264, si querés producir contenidos con eso y tu contenido algún día logra algunos mangos, viene un abogado con un papelito y te reclama derechos :D

    • Responder
    • Citar
    • Comentado:
  • Firefox 3.6.12, se ve bien, salvo que cuando uds caminan, se ven como "distorsiones"

    • Responder
    • Citar
    • Comentado:
  • Francis    

    en Internet Explorer 9 Beta se ve perfecto tmb...
    y es cierto me tienen las pelotas al plato cuando no se ponen de acuerdo para estandarizar los formatos o codecs y peor aún cuando prevalecen los que tienen licencia no GNU

    • Responder
    • Citar
    • Comentado:
  • Kool-Aid    

    Está bueno que se cargue solo, muy bueno. Cuando me puse a ver el video no tuve que esperar. Espeo que algún día implementen algo parecido en Youtube, pero que uno lo tenga que elegir como opción.

    • Responder
    • Citar
    • Comentado:
  • Pablo Grr    

    ese video... que hdp !

    • Responder
    • Citar
    • Comentado:

Deje su comentario:

Tranquilo, su email nunca será revelado.
La gente de bien tiene URL, no se olvide del http/https
Para evitar bots, si se tardó mucho en leer la nota seguramente no sirva y tenga que intentar dos veces

Negrita Cursiva Imagen Enlace


comentarios ofensivos o que no hagan al enriquecimiento del post serán borrados/editados por el administrador