El lenguage HTML5 sigue ganando terreno con la integración directa de videos y la enorme ventaja de poder ser leidos en terminales moviles iPhone y Android.
A continuación os ofrecemos detalles interesantes para actuar en este sentido:

Elegir el formato de exportación

La guerra de los codecs… Google, Apple, etc. cada uno quiere imponer su formato.
Panorama actual:

• H.264 (o MP4 nivel 10), proietario gratuito y soportado por Google Chrome, Apple Safari, MS Internet Explorer 9 y también en plataforma como Youtube y Vimeo.
  
• OggTheora es libre y esta soportado por Firefox, aún Mozilla apuesta ahora más para el WebM project.
• WebM es el proyecto resultado de la liberación del codec VP8 de Google. ¿Será el formato del futuro…?

De momento no se han definido estandares pero la reciente liberación del MP4 es la respuesta al proyecto WebM impulsado por Google. La tecnología tiene buena pinta la verdad, a ver quien sale ganando esta carrera…

Integración en la página

Antes de empezar piensa que:

• Idealmente para tener una máxima compatibilidad habría que gestionar varios formatos: .mp4, .ogv, .webm (Si no quieres instalar todos estos codecs resulta sensillo usar Firefogg o el todo-en-uno Miro Video Converter).
• ¿Como seguir teniendo compatibilidad con antiguos navegadores? Tendremos que seguir proponiendo una lectura vía el player flash ( lee el H.264 sin necesidad de comprimir en .flv)

El código HTML resultante tendría que parecerse a este:

<video id="my_clip" width="640" height="320" controls="controls" preload="true" >
<source src="http://domain.ext/my-clip.mp4" type="video/mp4" />
<source src="http://domain.ext/my-clip.webm" type="video/webm" />
<source src="http://domain.ext/my-clip.flv" type="video/flv" />
<source src="http://domain.ext/my-clip.ogv" type="video/ogg" />
<object width="640" height="240" type="application/x-shockwave-flash" data="http://domain.ext/my-player.swf">
<param name="movie" value="http://domain.ext/my-player.swf" />
<param name="flashvars" value="controls=true&amp;file=http://domain.ext/myclip.mp4" />
<img title="No se puede leer la video" src="/imagen-no-video.jpg" width="640" height="320" />
</object>
</video>

Acuérdate que lo que hacemos es enlazar directamente un video, no se trata de un player. Las funcionalidades como el video en plena pantalla no resultan siempre posibles. Aunque la solución es posible usando javascript podremos interactuar con nuestros medios!  Por destacar algunos proyectos que van con antelación, os dejo algunos…

Enlaces de interes

• VideoJS opensource.
• SublimeVideo prometedor, estamos probando la versión beta…
• Media Element, mi preferido y viene también como plugin WordPress.
• jPlayer: HTML5 Audio & Video para jQuery.
• YouTube HTML5 Video Player, Vimeo y Dailymotion ofrecen lectores HTML5, pruébalo!