Antes de HTML5 había que instalar plugins como Flash para ver los vídeos.
Ahora con la etiqueta <video> podemos incrustar vídeos en una página web.
<video width="320" height="240" controls>
<source src="https://kikopalomares.com/mov_bbb.mp4" type="video/mp4">
<source src="https://kikopalomares.com/mov_bbb.ogv" type="video/ogg">
Tu navegador no soporta la etiqueta de vídeo de HTML5
</video>
El atributo controls agrega los controles de video, como reproducción, pausa y volumen.
Es recomendable incluir atributos de ancho (width) y alto (height). Si no se configuran alto y ancho, la página puede parpadear mientras se carga el video.
El elemento <source> le permite especificar archivos de video alternativos que el navegador puede elegir. El navegador usará el primer formato reconocido.
El texto entre las etiquetas <video> y </video> solo se mostrará en navegadores que no admitan el elemento <video>.
Con el atributo autoplay puedes hacer que el vídeo comience automáticamente. En dispositivos como iPad o iPhones no funciona.
En HTML5 hay 3 formatos soportados: MP4, WebM, Ogg. En el pasado la compatibilidad con los navegadores era muy límitada, pero hoy en día prácticamente todos los navegadores soportan todos los formatos.
| Navegador | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | Si | Si | Si |
| Chrome | Si | Si | Si |
| Firefox | Si | Si | Si |
| Safari | Si | Si | No |
| Opera | Si | Si | Si |
| Formato | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| OGG | video/ogg |
HTML5 define métodos DOM, propiedades y eventos 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 notificarle cuando un vídeo comienza a reproducirse, está en pausa, etc.
