HTML Video
El elemento HTML <video> se utiliza para mostrar un vídeo en una página web.
El elemento HTML <video>
Para mostrar un vídeo en HTML, utilice el elemento <video>:
Ejemplo
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Su navegador no soporta la etiqueta de vídeo.
</video>
Inténtalo tú mismo »
Cómo funciona
El atributo controls agrega controles de video, como reproducción, pausa y volumen.
Es una buena idea incluir siempre los atributos width y height. Si no se configuran el alto y el ancho, la página puede parpadear mientras se carga el video.
El elemento <source> le permite especificar archivos de vídeo alternativos entre los que el navegador puede elegir. El navegador utilizará el primer formato reconocido.
El texto entre las etiquetas <video> y </video> solo se mostrará en navegadores que no admite el elemento <video>.
HTML <video> Autoplay (Auto-reproducción)
Para iniciar un vídeo automáticamente, utilice el atributo autoplay:
Ejemplo
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Su navegador no soporta la etiqueta de vídeo.
</video>
Inténtalo tú mismo »
Nota: Los navegadores Chromium no permiten la reproducción automática en la mayoría de los casos. Sin embargo, siempre se permite la reproducción automática silenciada.
Agregue muted después de autoplay para permitir que su video comience a reproducirse automáticamente (pero silenciado):
Ejemplo
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Su navegador no soporta la etiqueta de vídeo.
</video>
Inténtalo tú mismo »
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento <video>.
| Elemento | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Formatos de vídeo
Hay tres formatos de vídeo compatibles: MP4, WebM y Ogg. El soporte del navegador para los diferentes formatos es:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Video - Tipos de medios
| Formato de archivo | Tipo de medio |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML Video — Métodos, propiedades y eventos
El DOM HTML define métodos, propiedades y eventos para el elemento <video>.
Esto te 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, se pausa, etc.
Para obtener una referencia completa de DOM, vaya a nuestra Referencia de DOM de audio/vídeo HTML.
HTML Etiquetas de vídeo
| Etiqueta | Descripción |
|---|---|
| <video> | Definir un vídeo o película |
| <source> | Define múltiples recursos multimedia para elementos multimedia, como <video> y <audio> |
| <track> | Define pistas de texto en reproductores multimedia |
