Vídeo HTML
El elemento HTML <video>se utiliza para mostrar un video en una página web.
El elemento HTML <video>
Para mostrar un video en HTML, use el <video>elemento:
Ejemplo
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Cómo funciona
El controlsatributo agrega controles de video, como reproducción, pausa y volumen.
Es una buena idea incluir siempre widthy heightatributos. Si no se configuran la altura y el ancho, la página puede parpadear mientras se carga el video.
El <source>elemento le permite especificar archivos de video alternativos 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 admitan el <video>elemento.
HTML <video> Reproducción automática
Para iniciar un video automáticamente, use el autoplayatributo:
Ejemplo
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Nota: los navegadores Chromium no permiten la reproducción automática en la mayoría de los casos. Sin embargo, la reproducción automática silenciada siempre está permitida.
Agregue muteddespués
autoplaypara 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">
Your browser does not support the video tag.
</video>
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el
<video>elemento.
| Element | |||||
|---|---|---|---|---|---|
| <video> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Formatos de vídeo HTML
Hay tres formatos de video 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 |
Vídeo HTML: tipos de medios
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Vídeo HTML: métodos, propiedades y eventos
El HTML DOM define métodos, propiedades y eventos para el <video>elemento.
Esto le 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 video comienza a reproducirse, se detiene, etc.
Para obtener una referencia completa de DOM, vaya a nuestra Referencia de DOM de audio/video HTML .
Etiquetas de vídeo HTML
| Tag | Description |
|---|---|
| <video> | Defines a video or movie |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
| <track> | Defines text tracks in media players |