Reproducir vídeo en HTML
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.
¿Cómo funciona?
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>.
Autoplay
Con el atributo autoplay puedes hacer que el vídeo comience automáticamente. En dispositivos como iPad o iPhones no funciona.
Te recomiendo que mires este otro post donde se explica los casos que no funciona:
En HTML5 hay 3 formatos soportados: MP4, WebM, Ogg.
Navegador | MP4 | WebM | Ogg |
|---|---|---|---|
Internet Explorer | Sí | No | No |
Chrome | Sí | Sí | Sí |
Firefox | Sí | Sí | Sí |
Safari | Sí | Sí | No |
Opera | Sí | Sí | Sí |
Media types
Formato | Media type |
|---|---|
MP4 | video/mp4 |
WebM | video/webm |
Ogg | video/ogg |
Métodos, propiedades y evento
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.
