Etiqueta Vídeo en HTML5

Con HTML5 mostrar vídeo en una página web está estandarizado. Hasta hoy mostrar vídeo requería el uso de plugins de terceros como puede ser Flash. En HTML5 el modo de integrar vídeo en una página web es mediante el elemento video.

Actualmente hay tres formatos de vídeo. Desafortunadamente no todos los navegadores soportan todos los formatos de vídeo:

• Ogg, es un formato abierto que usa el codec de vídeo Theora y Vorbis para audio.
• MPEG4, es un formato que usa los codecs propietarios H.264 y AAC.
• WebM, es un formato abierto que usa el VP8 y Vorbis como codecs.

Chrome soporta todos ellos. Opera y Firefox los que son formatos abiertos y IE y Safari sólo MPEG4.

Para mostrar un vídeo en HTML5 todo lo que se necesita es incluir el código:

Con el atributo controls podemos añadir métodos para parar, pausar y controlar el volumen. Los navegadores que no soporten la etiqueta vídeo mostrarán el contenido entre las etiquetas de vídeo. Puede ser buena idea usar los atributos width y height para definir las dimensiones del vídeo.

Nos podemos ayudar de la etiqueta <source> para indicar al navegador fuentes alternativas del vídeo. La primera en la lista que sea soportada por el navegador será la usada para reproducir el vídeo.

Los atributos de <video> son:

audio	muted	Por defecto volumen del audio, muted sería apagado.
autoplay	autoplay	El vídeo comienza a reproducirse inmediatamente.
controls	controles	Muestra los controles de reproducción.
height	pixeles	Fija la altura en pixeles.
loop	loop	Reproducir de nuevo al finalizar.
poster	url	La url de una imagen que representa el vídeo.
preload	preload	El vídeo se carga al cargar la página y espera a su reproducción.
type	video/ogg	Define el tipo mime del vídeo.
src	url	Fuente del vídeo.
volume	número	Fija el volumen desde silencio, 0.0 hasta lo más alto 1.0.
width	pixeles	Fija el ancho en pixeles

Más información.