Video HTML5

Reproduciendo video en HTML

Antes de HTML5, un video solo podía ser reproducido en un navegador web con un plug-in (un complemento como flashplayer). El elemento <video> del HTML5, especifica una forma estándar de embeber un video en una página web.

El elemento <video> del HTML5

Para mostrar un video en HTML se utiliza el elemento <video> de la siguiente manera:

<video width="320" height="240" controls>
  <source src="pelicula.mp4" type="viedo/mp4">
  <source src="pelicula.ogg" type="video/ogg">
  Tu Navegador Web no soporta la etiqueta video.
</video>

¿Cómo funciona?

  • El atributo controls agrega al video controles, como play, pause y volumen.
  • Es buena idea incluir siempre los atributos width y height, porque si se omiten, la página podría parpadear mientras se carga el video.
  • El elemento <source> permite especificar los archivos de video alternativos de los cuales el navegador web puede elegir. El navegador utilizará el primer formato reconocido.
  • El texto entre las etiquetas <video> y </video> solo será mostrado en navegadores web que no soportan el elemento <video>.

Autoreproducción de <video>

Para iniciar un video automáticamente se utiliza el atributo autoplay como se muestra en el siguiente ejemplo:

<video width="320" height="240" autoplay>
  <source src="pelicula.mp4" type="viedo/mp4">
  <source src="pelicula.ogg" type="video/ogg">
  Tu Navegador Web no soporta la etiqueta video.
</video>

Soporte de Video HTML5 en Navegadores Web

En HTML5 hay 3 formatos de video soportados: MP4, WebM y Ogg. En la siguiente tabla se lista el soporte de formatos de video en los navegadores web más populares:

Navegador Web MP4 WebM Ogg
Internet Explorer Si NO NO
Chrome Si Si Si
Firefox Si Si Si
Safari Si NO NO
Opera Si (v.25+) Si Si

Tipos de Media en video HTML

Formato Tipo Media
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Métodos, Propiedades y Eventos de video HTML5

El HTML5 define métodos, propiedades y eventos DOM para el elemento <video>. Esto permite cargar, reproducir y pausar videos, así como configurar la duración y el volumen. También hay eventos DOM que pueden notificar cuando un video comienza reproducirse, es pausado, etc.

Etiquetas de video HTML5

Etiqueta Descripción
<video> Define un video.
<source> Define múltiples recursos de media elementos media, como <video> y <audio>.
<track> Define pistas de texto en reproductores de multimedia.