Video en HTML5 y WebM: Información, ejemplos y enlaces

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. 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

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s