Elemento video HTML5

Hasta la llegada del HTML5, no existía ningún estándar para mostrar vídeos en una página web y la mayoría eran mostrados a través de plugins (como Flash Player) e incluso hacían falta diferentes plugins para los diferentes browsers.

HTML5 define un nuevo elemento <video> que especifica un método estándar de encapsular vídeos en una web.

Internet Explorer 9+, Firefox, Opera, Chrome, y Safari soportan el elemento <video>. Además, los formatos de vídeo soportados son mp4, ogg y webm.

SINTAXIS

Para añadir un elemento <video> en una página web necesitamos el siguiente código:

<video width="640" height="480" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
Tu navegador no soporta el elemento video.
</video>

ATRIBUTOS

Los atributos más importantes que destacamos son los siguientes:

• controls: añade los controles al vídeo, como play, stop, pausa y volumen.
• height y width: indican el ancho y alto del vídeo. Si no proporcionamos estos datos el espacio que ocupa se recalculará en el momento de mostrarse el vídeo, ya que el navegador no tiene forma de saber el tamaño que ocupará, con lo que gráficamente puede quedar mal la web.
• source: el elemento de HTML5 source nos servirá para indicar qué vídeo queremos reproducir. Podemos indicar varios sources con varios formatos y así el navegador reproducirá el primero que reconozca, ya que todos los navegadores no son capaces de reproducir todos esos formatos
• track: con este nuevo elemento de HTML5 indicamos las pistas de texto para los vídeos.

MÉTODOS Y EVENTOS

El elemento <video> dispone además de atributos una serie de métodos básicos para poder iniciar o pausar el vídeo, como son play() y pause(), además de eventos que nos permitirán controlar aspectos de la reproducción, como el momento de la carga, el aumento del volumen, etc.

Para obtener una referencia completa de las características del elemento <video> de HTML5 podéis acceder al siguiente link:

http://www.w3schools.com/tags/ref_av_dom.asp