Be a happy coder

You are here

Jugando con HTML 5 video

10 Nov 2012

Hoy me proponía hacer una simple página que hiciera reproducción de un vídeo en formato MP4, puesto que gracias a HTML 5 ahora disponemos de un elemento que nos facilita mucho las cosas. ¿He dicho nos facilita? Bueno, no todo se consigue fácilmente ;)

HTML 5 nos da más facilidad respecto a códigos que en el pasado había que utilizar para mostrar un vídeo por la web. Por ejemplo el siguiente código era lo que había que utilizar antes de HTML 5 para incluir un vídeo en una página web, tomado directamente de Youtube:

 

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>

 

Con HTML 5 la cosa se simplifica bastante más, como podemos ver en el siguiente ejemplo con el que podemos reproducir un MP4 en el navegador:

<video src=myvideo.mp4 width=640 height=400 controls>

</video>

Bastante más simple sin duda ;)

Sin embargo, no funciona en Firefox aunque sí reproduce el vídeo en Chrome. En Firefox este código nos mostrará un rectángulo negro con el texto "Video format or MIME type is not supported". El motivo es porque MP4 es formalmente un MPEG H.264 (AAC o MP3), esto significa que tenemos un contenedor MPEG con un formato de códec de vídeo H.264 y un códec de audio AAC o MP3, lo que significa que son formatos propietarios, cubiertos por patente, y no tendrían licencia libre.  Debido a que H.264 actualmente no es un formato libre, no se ajusta a la plataforma web abierta por lo que no estaría soportado por Mozilla, Chromium y Opera. En este enlace podemos ver la compatibilidad de estos formatos con los distintos navegadores que existen actualmente.

¿Que se puede hacer ante esto? Recurrir a un formato abierto, ya que decir que no soporta un formato propietario no significa decir que no soporta ningún formato ;)

El formato WebM está basado en una versión restringida del formato contenedor Matroska. Siempre utiliza el códec de vídeo VP8 y el códec de audio Vorbis. WebM está soportado nativamente en Gecko (Firefox), Chrome y Opera, y se puede dar soporte al formato a Internet Explorer y Safari instalando un add-on.

Todas las patentes conocidas del formato WebM tienen licencia libre para todos. De modo que nuestro siguiente paso será convertir nuestro MP4 en WebM.

ffmpeg -i myvideo.mp4 myvideo.webm

Tan simple como parece, ffmpeg se encarga de imaginarse que es lo que necesitamos tomando como referencia la extensión del archivo destino, por lo que no es necesario indicarle algún otro parámetro sobre el códec a usar.

Ahora modificamos el código de nuestra página de la siguiente forma:

<video width=640 height=400 controls>

<source src="myvideo.webm" type="video/webm">

<source src="myvideo.mp4" type="video/mp4">

Lo siento, tu navegador no soporta HTML5 video.

</video>

Y ya tenemos un código que nos permite reproducir el vídeo en cualquier navegador.

 

Etiquetas: