Vídeo en HTML5

Profesores:JAB y Ester Torres

Diferentes estándares de vídeo

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:
<video>
   <source src="video.ogv" type="video/ogg"/>
</video>
En el tag <video> es posible incorporar un gran número de atributos que nos ayudan a poder controlar mejor el video, como son:

Por lo tanto, si utilizásemos todos los atributos, el código anterior quedaría de la siguiente manera: 
<video width="800" height="600" controls autoplay loop poster="fotograma.png">
   <source src="video.ogv" type="video/ogg"/>
</video>

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.

El código HTML completo quedaría así:
<video width="800" height="600" controls autoplay loop poster="fotograma.png">
   <source src="video.ogv" type="video/ogg"/>
   <source src="video.mp4" type="video/mp4"/>
   <source src="video.webm" type="video/webm"/>
   <p>Tu navegador no soporta HTML5</p>
</video>

Ejemplo práctico

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: 
<video width="800" height="600" controls autoplay loop poster="fotograma.png">
   <source src="video.ogv" type="video/ogg"/>
   <source src="video.mp4" type="video/mp4"/>
   <source src="video.webm" type="video/webm"/>
	  
   <object width="800" height="600" data="video.flv">
   <param name="movie" value="video.flv">
   <embed src="video.flv" width="800" height="600">
   </object>

   <p>Tu navegador no soporta HTML5</p>
</video>
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:
  1. Ir a la web de www.youtube.com y acceder al vídeo que quieras añadir a tu web.
  2. Hacer clic con el botón derecho del ratón sobre el vídeo
  3. Seleccionar la opción "Copiar código de inserción".
  4. 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:
<iframe width="640" height="360" src="http://www.youtube.com/embed/
_93kDSPlKIM?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>