Cargar un vídeo de diferentes formatos con HTML5

Introducción

En el ejemplo cargar un vídeo con HTML5 veíamos una forma sencilla de cargar un vídeo del formato Ogg con código HTML5. En este caso vamos a ver cómo cargar un vídeo desde diferentes orígenes con diferentes formatos.

Es decir, vamos a indicarle a nuestro navegador dónde puede encontrar diferentes formatos. Esto se hace así debido a que el navegador puede no reconocer y cargar alguno de los formatos. En ese caso, al indicarle una lista, cargará el primero de los formatos que consiga interpretar.

Formatos de vídeo en HTML5

Recordamos los formatos con los que se trabaja en HTML5:

• MPEG-4, extensiones .mp4 o .m4v
• Flash, la extensión .flv
• Ogg, la extensión .ogv
• WebM, extensión .webm

Cargar vídeo con un solo formato

Si el formato es único nos vale con indicar el origen en el atributo src del elemento VIDEO.

<video src="mivideo.ogv" controls>
</video>

Usar el elemento SOURCE

Pero para cargar un vídeo de diferentes formatos con HTML5 tenemos que apoyarnos en el elemento SOURCE.

El elemento SOURCE contendrá un atributo src que indique el origen del vídeo y otro atributo type dónde indicaremos el tipo del elemento multimedia que vamos a cargar.

El elemento SOURCE será un elemento anidado dentro del elemento VIDEO.

Ejemplo con múltiples formatos

Así, nuestro código para que el vídeo pueda ser cargado de diferentes formatos es el siguiente:

<video controls>
  <source src="[mivideo.mp](http://mivideo.mp/)4" type="video/mp4">
  <source src="mivideo.ogv" type="video/ogg">
  <source src="mivideo.webm" type="video/webm">
</video>