Etiqueta HTML `<video>`

La etiqueta <video> es uno de los elementos HTML5. Se utiliza para incrustar video en un documento HTML. Los navegadores no admiten todos los mismos formatos de video, por lo que debes proporcionar varios formatos de video para una correcta visualización. La ruta al archivo de video se anida dentro de la etiqueta <source> o el atributo src.

También puedes incluir un texto alternativo en la etiqueta <video>, el cual se mostrará en caso de que el navegador no admita el formato de video.

Hay 3 formatos de video admitidos para el elemento <video>: MP4/MPEG 4, WebM y Ogg. Para la compresión/descompresión de archivos de video grandes se utilizan programas especiales, conocidos como códecs.

Los archivos MP4/MPEG 4 se utilizan con los códecs de video H264 y audio AAC; los archivos WebM, con los códecs de video VP8 o VP9 y audio Vorbis u Opus; y los archivos Ogg, con el códec de video Theora y audio Vorbis.

Para controlar el contenido de video y/o audio, puedes utilizar diferentes eventos. Estos eventos permiten monitorear el progreso de la descarga y reproducción del medio, así como la posición y el estado de reproducción.

Para cambiar la posición del video dentro del marco del elemento, puedes usar la propiedad CSS object-position. Si deseas controlar cómo se cambia el tamaño del video para ajustarse al marco, utiliza la propiedad object-fit.

Puedes agregar subtítulos/leyendas a tu video utilizando JavaScript con el elemento <track> y el formato WebVTT. También puedes reproducir archivos de audio usando <video>, lo cual puede ser útil en algunos casos.

El elemento <video> es un elemento reemplazado con un display: block por defecto. El estilo generalmente se maneja mediante width/height o propiedades CSS como object-fit y object-position.

Sintaxis

La etiqueta <video> se escribe en pares. El contenido se escribe entre las etiquetas de apertura (<video>) y cierre (</video>).

Ejemplo de la etiqueta HTML `<video>` con los atributos controls, muted y src:

Ejemplo de la etiqueta HTML <video>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video{
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="https://es.w3docs.com/build/videos/arcnet.io(7-sec).mp4" playsinline>
      <track default kind="subtitles" srclang="en" src="https://es.w3docs.com/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

Ejemplo de la etiqueta HTML `<video>` con el atributo controls:

¿Cómo se utiliza la etiqueta HTML <video>?

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls playsinline>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
      <source src="https://es.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

TIP

Los atributos controls, autoplay y loop son atributos booleanos y no aceptan valores. Si se especifican, están activados por defecto.

Atributos

Atributos	Valor	Descripción
autoplay	autoplay	Especifica que el video comenzará a reproducirse automáticamente en cuanto esté listo.
controls	controls	Muestra los controles que permiten al usuario controlar la reproducción del video, incluyendo el volumen, la búsqueda y la pausa/reanudación.
height	pixels	Establece la altura del reproductor de video.
loop	loop	Especifica que el video volverá a comenzar cada vez que termine.
muted	muted	Especifica que el video se silenciará inicialmente.
poster	URL	Establece una imagen que se mostrará mientras se descarga el video o hasta que el usuario presione el botón de reproducción.
preload	auto, metadata, none	Proporciona una pista al navegador sobre qué contenido se cargará antes de reproducir el video: `<br>` auto: Se puede descargar todo el archivo de video. `<br>` metadata: Se obtienen los metadatos del video (por ejemplo, la duración). `<br>` none: El video no debe precargarse. `<br>` Nota: El atributo se ignora si autoplay está habilitado.
src	URL	Establece la URL del video incrustado. En su lugar, se puede usar el elemento `<source>` para especificar el video a incrustar.
width	pixels	Establece el ancho del reproductor.

La etiqueta <video> admite los Atributos Globales y los Atributos de Eventos.

Práctica

¿Para qué se puede utilizar la etiqueta HTML <video>?

Para integrar videos en documentos HTMLPara integrar un enlace en vivo en documentos HTMLPara colocar un clip de audio en un documento HTMLPermite controlar videos, como reproducir, pausar y ajustar el volumenSe utiliza para insertar imágenes en el documento HTML

Etiqueta HTML <video> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <video> con los atributos controls, muted y src: ​

Ejemplo de la etiqueta HTML <video> con el atributo controls: ​