El elemento HTML
<video>se usa para mostrar un video en una página web.
Elemento video
Para mostrar un video en HTML, use el elemento <video>:
Ejemplo:
¿Cómo funciona?
El atributo controls agrega controles de video como reproducir, pausar y volumen.
Es una buena idea siempre incluir los atributos width y height. Si no se establece el ancho y alto, la página puede parpadear mientras carga el video.
El elemento <source> permite especificar archivos de video alternativos que el navegador puede elegir. El navegador utilizará el primer formato que reconozca.
El texto entre las etiquetas <video> y </video> solo se mostrará en navegadores que no soporten el elemento <video>.
Reproducción automática
Para iniciar un video automáticamente, use el atributo autoplay.
Ejemplo:
Nota: los navegadores Chromium no permiten la reproducción automática en muchos casos. Sin embargo, la reproducción automática silenciada siempre está permitida.
Agregue muted después de autoplay para permitir que el video comience a reproducirse automáticamente (pero silenciado):
Ejemplo:
Compatibilidad con el navegador
Los números de la siguiente tabla especifican la primera versión del navegador que fue totalmente compatible con el elemento .
| Elemento | Chrome | Edge | Mozilla | Safari | Opera |
<video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Formatos de video
Hay tres formatos de video soportados: MP4, WebM y Ogg. El soporte del navegador para los diferentes formatos es:
| Navegador | MP4 | WebM | Ogg |
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
Tipos de medios
| Formato de archivo | Tipo de medio |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Métodos, propiedades y eventos
El DOM de HTML define métodos, propiedades y eventos para el elemento <video>.
Esto le permite cargar, reproducir y pausar vídeos, así como configurar la duración y el volumen.
También hay eventos DOM que pueden notificarle cuando un video comienza a reproducirse, detenerse, etc.
Ejemplo:
Resumen
El elemento HTML <video> se usa para mostrar un video en una página web.
El elemento <source> define múltiples elementos como video y audio.
Traducido con 💚 desde W3Schools.com