Reproducir vídeos con HTML 5

Hasta hace bien poco, reproducir vídeos en nuestras aplicaciones era una tarea complicada. Para poder visualizarlos, necesitábamos algún plugin de Flash o de Silvelight, pero todo esto está cambiando con la llegada de HTML 5.

Hasta ahora, para mostrar el vídeo, utilizábamos un codigo similar a este que os indico:

<object width="320" height="240">
<param name="movie" value="myvideo.swf" />
<embed src="myvideo.swf" width="320" height="240">embed>
object>

Con la llegada de HTML 5, la inclusión de vídeo es más sencillo, además más fácil de entender y de poder jugar con él, ya que estas etiquetas aparecen dentro del DOM, por lo que podemos hacer ciertas acciones sobre los vídeos. Además, no hace falta ningún plugin adicional para su reproducción.

Con HTML 5, la inclusión de vídeos ahora se hace de la siguiente forma.

<video src="myvideo.mp4" width="320" height="240" />

A pesar de la simplicidad de la inserción, nos aparece otro problema, ya que los vídeos pueden estar en distintos formatos. Así por ejemplo IE y Safari apoyan a los archivos MP4 o H.264, mientras que otros como Firefox o Chrome, apoyan al formato Theora o Vorbis.

Ante este problema, HTML 5 nos facilita mucho las cosas, ya que le podemos indicar un listado de vídeos a reproducir, y él reproducirá el primero que encuentre con un formato compatible.

<video width="320" height="240">
       <source src="myvideo.mp4" type="video/mp4" />
       <source src="myvideo.ogv" type="video/ogg" />
       <source src="myvideo.webm" type="video/webm" />
video>

Si el navegador no soporta tags de HTML 5, le podemos indicar que entonces utilice flash para su reproducción.

<video width="320" height="240">
       <source src="myvideo.mp4" type="video/mp4" />
       <source src="myvideo.ogv" type="video/ogg" />
       <source src="myvideo.webm" type="video/webm" />
       <object width="320" height="240">
       <param name="movie" value="myvideo.swf" />
       <embed src="myvideo.swf" width="320" height="240">embed>
       object>
video>

Aunque también podemos hacer que se muestre un error, ya sea texto o un imagen, en caso de que no reconozca ningún formato.

<video width="320" height="240">
       <source src="myvideo.mp4" type="video/mp4" />
       <source src="myvideo.ogv" type="video/ogg" />
       <source src="myvideo.webm" type="video/webm" />
       <p>Sorry, your browser cannot play this video.p>
       <img src="videofail.png" />
video>

Como podemos ver, la llegada de HTML 5 facilita mucho las cosas a los desarrolladores.