Blog Sad Hill

Siguiendo el hilo de la anterior entrada, ahora veremos WebM un poco más en detalle. Comenzando por como HTML5 permite incorporar video a una página web de forma sencilla. Hasta ahora había que insertar un tedioso codigo JavaScript como objeto embebido y etc. etc.:
<object width="425" height="344">
   <param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"></param>
   <param name="allowFullScreen" value="true"></param>
   <param name="allowscriptaccess" value="always"></param>
   <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"
    type="application/x-shockwave-flash" allowscriptaccess="always"
    allowfullscreen="true" width="425" height="344"></embed>
</object>
Con HTML5 basta con escribir el siguiente tag:
<video src="mi-video.mp4" />
Es una sintaxis extremadamente sencilla, casi tanto como la de insertar imágenes con la etiqueta <img> y con la barra / de autocierre. El estándar provee además otras posibilidades como especificar el tamaño en pantalla o el codec empleado:
<video src="mi-video.mp4" width=1920 height=1080 controls poster="mi-video-vista-previa.jpg"> </video>
Donde se pueden ver los parámetros width y height para el tamaño, la palabra controls para que aparezcan unos botones de reproducción y pausa y un poster, que es la imagen de vista previa a emplear. Además el tag de video pasa a cerrarse con la barra habitual en un nuevo tag de cierre: </video>
Esto además se ha hecho así para permitir colocar elementos alternativos al video HTML5 entre los dos tags. Supongamos que queremos embeber el video anterior con HTML5 pero codificado con H.264 para el navegador Safari de Apple, que cuenta con soporte para H.264 y con Theora para, por ejemplo, Firefox ya que Mozilla no quiso adquirir licencias de uso de H.264; usemos el atributo type para diferenciarlos:
<video width=1920 height=1080 controls poster="vista-previa.jpg">
   <source src=video-mozilla.ogv type=video/ogg>
   <source src=video-safari.mp4 type=video/mp4>
   Descargar <a href=video-otros.ogg> para el resto de navegadores </a>
</video>
Ahí está pues: el video en el tamaño deseado, dos opciones bien especificadas (mozilla o safari según el tipo de video) e incluso un enlace al archivo por si el usuario nos visita con un navegador que no esté preparado para este nuevo código. Esto implica que debemos tener el mismo video codificado varias veces (con el consiguiente gasto de espacio y su incomodidad a la hora de crear contenidos) y al mismo tiempo, afrontar que no todos nuestros usuarios puedan utilizar uno u otro.
Aquí es donde WebM viene a ofrecer una nueva forma de afrontar estas situaciones. Al ser una tecnología libre y estar basado, a su vez, en tecnologías tambien libres, bastará con que solo tengamos el video codificado con WebM y lo incluyamos en el tag de video.
<video controls="controls">
    <source src="mi-video.webm" type='video/webm; codecs="vorbis,vp8"'>
    <p><a href="mi-video.webm">Descargar el video</a>.</p>
</video>
¿Mejor así, verdad?. HTML5 provee otros atributos como “autoplay“, que hará que el video comience nada más cargar la página en la que esté embebido. Por último, quiero añadir que si nuestro navegador soporta HTML5 y WebM, podemos ya ver algunos videos codificados con WebM en la versión HTML5 de Youtube, como ya expliqué en mi anterior post. Solo hay que añadir &webm=1 al final de la url, por ejemplo: http://www.youtube.com/watch?v=H_mU7lkE-sA&html5=True&webm=1
Para empaparse un poco más con toda esta información, dejo varios enlaces:
Información sobre HTML5 y WebM:
HTML5 Wikipedia
Borrador HTML5 del consorcio W3C
Ativar Youtube en HTML5 BETA
Introducción a video HTML5 para desarrolladores (desde Opera Labs)
Página oficial de WebM
Blog de desarrolladores de WebM
Articulo sobre WebM en la versión Nightly Build del navegador Opera

Ayer se podía leer en OMG! Ubuntu y otros medios que Google estaba preparando su propio codec para video en streaming. Se llama WebM y es rival directo para el codec H.264 (el empleado actualmente, sobretodo para alta definición).
WebM se compone fundamentalmente de video VP8, audio Vorbis y un contenedor de la familia Matroska (los famosos archivos .mkv); y todos los detalles se pueden consultar en el blog del proyecto.
Hay varios apetitosos alicientes que pueden empujarnos a apoyar WebM. En primer lugar, ha sido diseñado guardando muy buena compatibilidad con Linux y es una esperanza para todos aquellos a quien Flash nos decepciona una y otra vez por su bajo rendimiento (ya que Adobe nunca ha lanzado una versión suficientemente rápida). Por otra parte, el nuevo códec es un compendio de tecnologías libres y también lo será en sí mismo; mientras que H.264 es tecnología propietaria de marcas muy importantes como Apple.
Si Mozilla y Opera no planeaban incluir compatibilidad con HTML5 en sus programas por problemas con las licencias de estas tecnologías, por coste y filosofía de codigo cerrado, ahora se abre una ventana muy amplia para que tanto ellos como cualquier otro desarrollador, por pequeño que sea, pueda aprovechar las bondades de HTML5 sin tener que afrontar estas restricciones. Ahora, Adobe incorporará compatibilidad con WebM en Flash, lo mismo que Microsoft en Internet Explorer 9 y por supuesto Opera y Mozilla lo harán en próximas versiones de sus navegadores.

Además, desde hoy ya se puede empezar a utilizar WebM. Está disponible en Launchpad para el navegador Chromium. Chrome lo tendrá a partir del día 24 y los más impacientes pueden buscar las compilaciones diarias (Nightly build’s) de Firefox y Opera (aunque estas implementaciones aún están en un proceso temprano de desarrollo). Si eres de estos impacientes, este video puede mostrarte las bondades del nuevo códec (visualizalo a 1080p): WebM video VP8 youtube

Todos recordamos el famoso video de OK Go titulado “Here it goes again” en el que la banda exhibía una coreografía muy trabajada (como en otros de sus videos). El que no sepa a qué me refiero siempre puede volver a ver el video en Youtube: http://www.youtube.com/watch?v=dTAAsCNK7RA.
Leyendo en el blog de desarrolladores de Youtube en español encontré la entrada del 9 de marzo en la que se explicaba pequeños cambios en cuanto al tamaño de reproducción de algunos videos y se enlazaba hacia uno de los mejores videos en HD 1080p disponibles en streaming en la página. Era de nuevo un video del grupo OK Go, en este caso titulado “This Too Shall Pass”. Al verlo en la máxima calidad he quedado asombrado tanto por lo bien que se ve como por el video y la canción. Sobretodo por el video, debería decir. Me parece muy bueno y confirma que OK Go es mucho más que cuatro tipos saltando en unas cintas de gimnasio.

Letra de “This Too Shall Pass”. La canción también está disponible a través de Spotify: OK Go -- This Too Shall Pass.