Aunque el código HTML5 para la inserción de vídeo directamente en HTML5 es muy sencillo, todavía tiene un único inconveniente. No todos los navegadores aceptan todos los formatos de vídeo existentes. De hecho de los 3 estándares existentes, el único navegador que los acepta a todos es Chrome.
Así que, si queremos que el vídeo se pueda visualizar en todos los navegadores tendremos que añadir el mismo vídeo en distintos formatos.
Actualmente existen 3 estándares de vídeo que utilizan códecs diferentes y que vienen impulsados por grandes empresas.
El formato MP4 (ficheros con extensión .mp4 o .mov) que bajo licencia utiliza el códec H264 (el mismo que utiliza Flash). Es impulsado por Apple y Microsoft.
El formato OGG (ficheros con extensión .ogv) que utiliza el códec On2VP8 es gratuito. Impulsado por Mozilla, Opera y Firefox.
El formato WebM (ficheros con extensión .webm) también es gratuito e impulsado por los mismos que apoyan el formato OGG (Mozilla, Opera y Firefox).
Compatibilidad con navegadores
La tabla de los diferentes formatos de vídeo aceptados por los diferentes navegadores queda así:
MP4
OGG
WebM
Firefox
-
+3.5
+4.0
Chrome
+3.0
+3.0
+3.0
Opera
-
+10.5
+10.6
Safari
+3.1
-
-
IExplorer
+IE9
-
-
<video>
El código HTML estándar para visualizar un único formato de vídeo sería:
Si queremos que el vídeo se pueda visualizar desde cualquier navegador (que soporte HTML5), tenemos que añadir a este código más posibilidades y por lo tanto tenemos que tener el vídeo grabado en diferentes formatos.
Si además queremos asegurarnos de que el vídeo también se podrá visualizar en navegadores antiguos tendremos que añadir la posibilidad de visualizar el vídeo en el formato de Flash (.flv), que es soportado por todos los navegadores, quedando el código de la siguiente manera:
En este ejemplo se han utilizado únicamente los atributos 'width', 'height', 'controls' y 'poster', evitando utilizar la opción 'autoplay' (ya que no nos interesa que el video se reproduzca automáticamente al cargar la página).
Añadir un vídeo de Youtube
Para añadir un vídeo de Youtube lo único que tenemos que hacer es:
Ir a la web de www.youtube.com y acceder al vídeo que quieras añadir a tu web.
Hacer clic con el botón derecho del ratón sobre el vídeo
Seleccionar la opción "Copiar código de inserción".
Ya dentro del editor de HTML, crear un DIV y pegar dentro el contenido que se ha copiado en el punto anterior, que será algo parecido al siguiente código: