Cómo preparar vídeo para HTML5

En una entrada anterior estuvimos viendo cómo preparar ffmpeg para poder codificar vídeo en formato WebM. Ahora veremos cómo utilizarlo para preparar un archivo y ponerlo en una página web, usando HTML5 (con la etiqueta <video>), pero con soporte para navegadores que aún no lo entiendan, usando un reproductor Flash.

Mientras no se aclare el tema de los formatos de vídeo en HTML5, no va a ser posible tener un único archivo de vídeo que funcione en todos los navegadores. Hasta hace poco, bastaba con preparar el vídeo en dos formatos; contenedor MP4 con vídeo H.264 y audio AAC, y contenedor OGM con vídeo Theora y audio Vorbis (OGG).

El archivo OGM era el adecuado para ver en Firefox u Opera con HTML5, mientras que el vídeo MP4 nos podía servir para visualizarlo en Google Chrome o Safari directamente con HTML5, así como para usarlo con un reproductor Flash en otros navegadores y también para dispositivos móviles (iPhone, iPad, Android...).

Con la entrada en el juego del formato WebM (con vídeo VP8 y audio OGG), la cosa se complica más, ya que es una nueva opción que será soportada en el futuro por Chrome, Firefox, Internet Explorer y Opera.

Por lo tanto, pensando en lo que hay ahora y en lo que habrá en el futuro, vamos a preparar el vídeo para los tres tipos de formato: MP4, OGM y WebM.

Cómo codificar

Suponiendo que tengamos una versión de ffmpeg con el soporte para todos los formatos que hemos mencionado antes (MP4, H.264, AAC, OGM, Theora, OGG audio, VP8, WebM), estos son los pasos.

• Preparar vídeo en MP4. Un comando parecido a este debería bastar:

./ffmpeg -i origen -acodec libfaac -ab 128k  -ar 44100 -ac 2 -s 640x480 -vcodec libx264 -vpre slow -vpre ipod640 -b 1500k -bt 1500k -aspect 640:480 -threads 0 -f ipod Destino.mp4

• Preparar vídeo en OGM. Un comando parecido a este debería bastar:

./ffmpeg -i origen -acodec libvorbis -ab 128k -ar 44100 -ac 2 -s 640x480 -vcodec libtheora -b 1500k -g 300 -aspect 640:480 -f ogg  Destino.ogg

• Preparar vídeo en WebM. Un comando parecido a este debería bastar:

./ffmpeg -i origen -acodec libvorbis -ab 128k -ar 44100 -ac 2 -s 640x480 -vcodec libvpx_vp8 -vpre 720p -b 1500k -bt 1500k -aspect 640:480 -f webm Destino.webm

Notas:

El ejemplo que he puesto parte de un vídeo a 640x480. Habría que ajustar el tamaño si fuera uno distinto (en los parámetetros -s 640x480 y -aspect 640:480), así como la velocidad de bits aumentándola o disminuyéndola adecuadamente (en los parámetros -b 1500k y -bt 1500k).

Insertando el vídeo en HTML

Si simplemente se tratara de insertar el vídeo usando HTML5, bastaría con algo del tipo:

 
   <video id="video" width="640" height="480" autobuffer>  
    <source src="http://web/Destino.mp4" type="video/mp4">  
    <source src="http://web/Destino.webm" type="video/webm">  
    <source src="http://web/Destino.ogg" type="video/ogg">  
   </video>   

Pero también queremos que el sistema "degrade" automáticamente si no hay soporte para HTML5, y utilice un reproductor Flash. Puestos entonces a meter más código, y habiendo ya varios proyectos de reproductores usando JavaScript que amplían las posibilidades, hemos elegido Video JS para este caso (a la espera de que SublimeVideo esté terminado, que también tiene muy buena pinta).

Se complica todo un poco más, pero tampoco demasiado. Tendremos que añadir a las cabeceras de la página las referencias al código JavaScript (video.js) y la hoja de estilos donde se personalizan los controles (video-js.css). Una vez hecho esto, la forma de ampliar el código sería la siguiente:

 <div class="video-js-box">  
   <video id="video" class="video-js" width="640" height="480" autobuffer>  
    <source src="http://web/Destino.mp4" type="video/mp4">  
    <source src="http://web/Destino.webm" type="video/webm">  
    <source src="http://web/Destino.ogg" type="video/ogg">  
    <object width="640" height="480" type="application/x-shockwave-flash"  
     data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">  
     <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />  
     <param name="allowfullscreen" value="true" />  
     <param name="flashvars" value='config={"clip":"http://web/Destino.mp4"}' />  
     <img src="http://web/error.png" width="640" height="480" alt="Poster Image" title="No video playback capabilities." />  
    </object>  
   </video>  
 </div>  

Ejemplo

Usando todo lo anterior, aquí podemos ver un ejemplo con un vídeo que grabé hace unas semanas del río Cifuentes en Trillo: