<video>: elemento HTML para incrustar video

Pruébalo

<video controls width="250">
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />

  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />

  Descarga el vídeo en formato
  <a href="/shared-assets/videos/flower.webm">WEBM</a>
  o
  <a href="/shared-assets/videos/flower.mp4">MP4</a>.
</video>

El ejemplo anterior muestra cómo usar el elemento <video>. Al igual que con el elemento <img>, incluimos la ruta al recurso multimedia que queremos mostrar dentro del atributo src; también podemos añadir otros atributos para indicar información como el ancho y el alto del vídeo, si debe reproducirse automáticamente y en bucle, o si deben mostrarse los controles de vídeo predeterminados del navegador, entre otras opciones.

El contenido que se encuentra entre las etiquetas de apertura y cierre <video></video> se muestra como alternativa en los navegadores que no admiten el elemento.

Atributos

Al igual que el resto de los elementos HTML, este elemento admite los atributos globales.

autoplay

Un atributo booleano; si se especifica, el vídeo comienza a reproducirse automáticamente en cuanto es posible, sin detenerse para terminar de cargar los datos.

Nota: Los navegadores modernos bloquean la reproducción automática de audio (o de vídeos con una pista de audio sin silenciar), ya que los sitios que reproducen audio de forma automática pueden resultar una experiencia desagradable para los usuarios. Consulta nuestra guía sobre la reproducción automática para obtener más información sobre cómo usar correctamente el autoplay.

Para desactivar la reproducción automática del vídeo, autoplay="false" no funciona; el vídeo se reproducirá automáticamente si el atributo está presente en la etiqueta <video>, sea cual sea su valor. Para eliminar la reproducción automática, hay que eliminar el atributo por completo.

Nota: Los vídeos que tienen establecido el atributo loading="lazy" no comenzarán a descargarse ni a reproducirse automáticamente hasta que el elemento esté cerca del viewport o dentro de él.

controls

Si este atributo está presente, el navegador ofrecerá controles que permiten manejar la reproducción del vídeo, incluidos el volumen, el desplazamiento y la pausa o reanudación de la reproducción.

controlslist

El atributo controlslist, cuando se especifica, ayuda al navegador a decidir qué controles mostrar para el elemento video siempre que el navegador muestre su propio conjunto de controles (es decir, cuando se especifica el atributo controls).

Los valores permitidos son nodownload, nofullscreen y noremoteplayback.

Usa el atributo disablepictureinpicture si quieres desactivar el modo Picture-in-Picture (y su control).

crossorigin

Este atributo enumerado indica si se debe usar CORS para obtener el vídeo relacionado. Los recursos habilitados con CORS pueden reutilizarse en el elemento <canvas> sin quedar contaminados. Los valores permitidos son:

anonymous

Envía una solicitud entre orígenes sin una credencial. Es decir, envía la cabecera HTTP Origin: sin cookies, sin certificado X.509 y sin realizar autenticación HTTP básica. Si el servidor no otorga credenciales al sitio de origen (al no establecer la cabecera HTTP Access-Control-Allow-Origin:), el recurso quedará contaminado y su uso se verá restringido.

use-credentials

Envía una solicitud entre orígenes con una credencial. Es decir, envía la cabecera HTTP Origin: con una cookie, un certificado o realizando autenticación HTTP básica. Si el servidor no otorga credenciales al sitio de origen (mediante la cabecera HTTP Access-Control-Allow-Credentials:), el recurso quedará contaminado y su uso se verá restringido.

Cuando no está presente, el recurso se obtiene sin una solicitud CORS (es decir, sin enviar la cabecera HTTP Origin:), lo que impide su uso sin contaminar en elementos <canvas>. Si el valor no es válido, se trata como si se hubiera usado la palabra clave enumerada anonymous. Consulta Atributos de configuración de CORS para más información.

disablepictureinpicture

Evita que el navegador sugiera un menú contextual de Picture-in-Picture o que solicite el modo Picture-in-Picture automáticamente en algunos casos.

disableremoteplayback

Un atributo booleano que se usa para desactivar la reproducción remota en dispositivos conectados mediante tecnologías cableadas (HDMI, DVI, etc.) e inalámbricas (Miracast, Chromecast, DLNA, AirPlay, etc.).

En Safari, puedes usar x-webkit-airplay="deny" como alternativa.

height

La altura del área de visualización del vídeo, en píxeles CSS (solo valores absolutos; sin porcentajes).

loading

Indica cómo debe cargar el vídeo el navegador (incluida cualquier imagen de póster):

eager

Carga el vídeo de inmediato, esté o no dentro del viewport visible en ese momento (este es el valor predeterminado).

lazy

Retrasa la carga del vídeo hasta que alcanza una distancia calculada respecto al viewport, según lo definido por el navegador.

La carga diferida (lazy loading) evita el consumo de ancho de banda de red y almacenamiento necesario para gestionar el vídeo hasta que sea razonablemente seguro que se va a necesitar. Esto mejora el rendimiento en la mayoría de los casos de uso habituales.

Aunque se recomienda especificar explícitamente los atributos width y height en todos los vídeos para evitar saltos de diseño (layout shift), esto es especialmente importante en los vídeos con carga diferida. Los vídeos con carga diferida nunca se cargarán si no intersecan con la parte visible de un elemento, incluso si su carga provocara dicha intersección, porque los vídeos no cargados tienen un width y un height de 0. Esto genera una experiencia de usuario todavía más negativa cuando el contenido visible en el viewport se reacomoda mientras el usuario lo está leyendo.

Es posible que los vídeos con carga diferida ubicados en el viewport visual aún no sean visibles cuando se dispare el evento load de la ventana. Esto se debe a que el evento se dispara en función de los vídeos con carga inmediata (eager); los vídeos con carga diferida no se tienen en cuenta aunque se encuentren dentro del viewport visual en la carga inicial de la página.

La carga solo se retrasa cuando JavaScript está activado. Se trata de una medida contra el rastreo, ya que si un agente de usuario admitiera la carga diferida con la ejecución de scripts desactivada, seguiría siendo posible que un sitio rastreara la posición aproximada de desplazamiento a lo largo de una sesión, colocando los vídeos de forma estratégica en el marcado de la página para que un servidor pudiera registrar cuántos vídeos se solicitan y cuándo.

Nota: El atributo loading="lazy" también afecta a los atributos autoplay, poster y preload, tal como se describe en cada una de esas secciones de la página.

loop

Un atributo booleano; si se especifica, el navegador volverá automáticamente al inicio al llegar al final del vídeo.

muted

Un atributo booleano que indica la configuración predeterminada de silencio para el audio del video. Si se establece, el audio estará silenciado inicialmente. Su valor predeterminado es false, lo que significa que se escuchará el audio al reproducir el vídeo.

Nota: Para activar el sonido, establecer muted="false" no funcionará; el audio permanecerá silenciado si el atributo está presente. Para desactivar el silencio, es necesario eliminar el atributo por completo.

playsinline

Un atributo booleano que indica que el vídeo debe reproducirse "en línea", es decir, dentro del área de reproducción del elemento. Ten en cuenta que la ausencia de este atributo no implica que el vídeo siempre se vaya a reproducir en pantalla completa.

poster

Una URL de la imagen que se mostrará mientras se descarga el vídeo. Si no se especifica este atributo, no se muestra nada hasta que el primer fotograma esté disponible, entonces, ese primer fotograma se muestra como imagen de póster.

Nota: Los vídeos con el atributo loading="lazy" establecido solo descargarán el recurso poster cuando el vídeo esté cerca del viewport o dentro de él.

preload

Este atributo enumerado tiene como objetivo sugerir al navegador qué contenido debería cargarse antes de reproducir el video para ofrecer la mejor experiencia de usuario. Puede tener uno de los siguientes valores:

• none: indica que el vídeo no debe precargarse.
• metadata: indica que solo se obtienen los metadatos del vídeo (por ejemplo, la duración).
• auto: indica que se puede descargar el archivo de vídeo completo, incluso si no se espera que el usuario vaya a usarlo.
• cadena vacía: es un sinónimo del valor auto.

El valor predeterminado varía según el navegador. La especificación recomienda establecerlo en metadata.

Nota:

• Los vídeos que tengan configurado el atributo loading="lazy" solo aplicarán el comportamiento de preload cuando el vídeo esté cerca del viewport o dentro de él.
• El atributo autoplay tiene prioridad sobre preload. Si se especifica autoplay, el navegador obviamente necesitará comenzar a descargar el vídeo para poder reproducirlo.
• La especificación no obliga al navegador a seguir el valor de este atributo; es solo una sugerencia.

src

La URL del vídeo que se va a incrustar. Es opcional; en su lugar, puedes usar el elemento <source> dentro del bloque de vídeo para especificar el vídeo que se va a incrustar.

width

La anchura del área de visualización del vídeo, en píxeles CSS (solo valores absolutos; sin porcentajes).

Eventos

audioprocess

El búfer de entrada de un ScriptProcessorNode está listo para ser procesado.

canplay

El navegador puede reproducir el contenido multimedia, pero calcula que no se han cargado suficientes datos para reproducirlo hasta el final sin tener que detenerse para almacenar más contenido en el búfer.

canplaythrough

El navegador calcula que puede reproducir el contenido multimedia hasta el final sin detenerse para almacenar contenido en el búfer.

complete

Finaliza la renderización de un OfflineAudioContext.

durationchange

Se ha actualizado el atributo duration.

emptied

El contenido multimedia se ha vaciado; por ejemplo, este evento se envía si el contenido multimedia ya se había cargado (total o parcialmente) y se llama al método load() para volver a cargarlo.

ended

La reproducción se ha detenido porque se alcanzó el final del contenido multimedia.

error

Se ha producido un error al obtener los datos multimedia, o el tipo de recurso no es un formato multimedia compatible.

loadeddata

Ha terminado de cargarse el primer fotograma del contenido multimedia.

loadedmetadata

Los metadatos han sido cargados.

loadstart

Se dispara cuando el navegador ha comenzado a cargar el recurso.

pause

La reproducción se ha pausado.

play

La reproducción ha comenzado.

playing

La reproducción está lista para comenzar tras haber estado pausada o retrasada por falta de datos.

progress

Se dispara periódicamente mientras el navegador carga un recurso.

ratechange

La velocidad de reproducción ha cambiado.

seeked

Ha finalizado una operación de búsqueda.

seeking

Ha comenzado una operación de búsqueda.

stalled

El agente de usuario está intentando obtener datos multimedia, pero estos no llegan de forma inesperada.

suspend

Se ha suspendido la carga de datos multimedia.

timeupdate

Se ha actualizado el tiempo indicado por el atributo currentTime.

volumechange

El volumen ha cambiado.

waiting

La reproducción se ha detenido debido a una falta temporal de datos.

Notas de uso

No todos los navegadores admiten los mismos formatos de vídeo; puedes proporcionar varias fuentes dentro de elementos <source> anidados, y el navegador usará entonces la primera que sea capaz de interpretar.

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Tu navegador no admite vídeo HTML. En su lugar, aquí tienes un
    <a href="myVideo.mp4" download="myVideo.mp4">enlace al vídeo</a>.
  </p>
</video>

Al utilizar elementos <source>, el navegador intenta cargar cada fuente de forma secuencial. Si una fuente falla (por ejemplo, debido a una URL no válida o a un formato no admitido), se intenta con la siguiente, y así sucesivamente. Se dispara un evento error en el elemento <video> después de que hayan fallado todas las fuentes; los eventos error no se disparan en cada elemento <source> individual.

Ofrecemos una guía completa y detallada sobre los tipos de archivo multimedia y la guía de códecs de vídeo admitidos. También está disponible una guía sobre los códecs de audio que se pueden usar junto a ellos.

Otras notas de uso:

• Si no especificas el atributo controls, el vídeo no incluirá los controles predeterminados del navegador; puedes crear tus propios controles personalizados usando JavaScript y la API HTMLMediaElement. Consulta Crear un reproductor de vídeo multiplataforma para más detalles.
• Para permitir un control preciso sobre tu contenido de vídeo (y audio), los HTMLMediaElement disparan muchos eventos diferentes. Además de ofrecer capacidad de control, estos eventos te permiten monitorizar el progreso tanto de la descarga como de la reproducción del contenido multimedia, así como su estado y posición de reproducción.
• Puedes usar la propiedad object-position para ajustar la posición del vídeo dentro del marco del elemento, y la propiedad object-fit para controlar cómo se ajusta el tamaño del vídeo para encajar en el marco.
• Para mostrar subtítulos junto con tu vídeo, puedes usar algo de JavaScript junto con el elemento <track> y el formato WebVTT. Consulta Añadir subtítulos a vídeos HTML para más información.
• Puedes reproducir archivos de audio usando un elemento <video>. Esto puede resultar útil, por ejemplo, si necesitas reproducir audio junto con una transcripción WebVTT, ya que el elemento <audio> no permite subtítulos mediante WebVTT.
• Para probar el contenido alternativo en navegadores que admiten el elemento, puedes reemplazar <video> por un elemento inexistente como <notavideo>.

Una buena fuente general de información sobre el uso de <video> en HTML es el tutorial para principiantes Vídeo y audio HTML.

Estilo con CSS

El elemento <video> es un elemento reemplazado — su valor de display es inline de forma predeterminada — pero su ancho y alto predeterminados en el viewport quedan definidos por el vídeo que se está incrustando.

No existen consideraciones especiales para aplicar estilos a <video>; una estrategia habitual es asignarle un valor display de block para facilitar su posicionamiento, tamaño, etc., y luego proporcionar la información de estilo y diseño que se necesite. Fundamentos de estilo de un reproductor de vídeo ofrece algunas técnicas de estilo útiles.

Añadir subtítulos y otras pistas de texto sincronizadas

Las pistas de texto sincronizadas para subtítulos, subtítulos ocultos, encabezados de capítulo, etc., pueden añadirse de forma declarativa anidando el elemento <track>. Las pistas se especifican con el formato Web Video Text Tracks File Format (WebVTT) (archivos .vtt).

Por ejemplo, el siguiente código HTML incluye el archivo "captions.vtt", que se utilizará para superponer subtítulos ocultos al vídeo si el usuario los activa.

<video controls src="video.webm">
  <track default kind="captions" src="captions.vtt" />
</video>

También se pueden añadir pistas de texto temporizado mediante programación usando la WebVTT API.

Detectar la adición y eliminación de pistas

Puedes detectar cuándo se añaden o se eliminan pistas de un elemento <video> usando los eventos addtrack y removetrack. Sin embargo, estos eventos no se envían directamente al propio elemento <video>. En su lugar, se envían al objeto de la lista de pistas dentro del HTMLMediaElement del elemento <video> que corresponde al tipo de pista que se añadió al elemento:

HTMLMediaElement.audioTracks

Un AudioTrackList que contiene todas las pistas de audio del elemento multimedia. Añade un detector de eventos addtrack a este objeto para recibir una notificación cuando se añadan nuevas pistas de audio al elemento.

HTMLMediaElement.videoTracks

Un VideoTrackList que contiene todas las pistas de vídeo del elemento multimedia. Añade un detector de eventos addtrack a este objeto para recibir una notificación cuando se añadan pistas de vídeo al elemento.

HTMLMediaElement.textTracks

Un TextTrackList que contiene todas las pistas de texto del elemento multimedia (usadas para subtítulos, subtítulos ocultos, etc.). Añade un detector de eventos addtrack a este objeto para recibir una notificación cuando se añadan pistas de texto al elemento.

Por ejemplo, para detectar cuándo se añaden o se eliminan pistas de audio de un elemento <video>, puedes usar un código como este:

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Este código detecta cuándo se añaden o se eliminan pistas de audio del elemento, y llama a una función hipotética en un editor de pistas para registrar y eliminar la pista de la lista de pistas disponibles del editor.

También puedes usar addEventListener() para escuchar los eventos addtrack y removetrack.

Compatibilidad del servidor con video

Si el tipo MIME del vídeo no está configurado correctamente en el servidor, es posible que el vídeo no se muestre o que aparezca un recuadro gris con una X (si JavaScript está activado).

Si usas el servidor web Apache para servir vídeos WebM, puedes solucionar este problema añadiendo las extensiones del tipo de archivo de vídeo al tipo MIME video/webm (la extensión de archivo WebM más común es .webm). Para ello, edita el archivo mime.types en /etc/apache o usa la directiva de configuración AddType en httpd.conf:

AddType video/webm .webm

Es posible que tu proveedor de alojamiento web ofrezca una interfaz sencilla para cambiar la configuración de tipos MIME de las nuevas tecnologías, hasta que se produzca de forma natural una actualización global.

Accesibilidad

Los vídeos deben ofrecer tanto subtítulos como transcripciones que describan su contenido con precisión (consulta Añadir subtítulos a vídeos HTML para más información sobre cómo implementarlos). Los subtítulos permiten que las personas con pérdida auditiva comprendan el contenido de audio de un vídeo mientras se está reproduciendo, mientras que las transcripciones permiten que quienes necesitan más tiempo puedan revisar el contenido de audio al ritmo y en el formato que les resulte más cómodo.

Cabe destacar que, aunque puedes subtitular contenido de solo audio, únicamente puedes hacerlo cuando reproduces ese audio dentro de un elemento <video>, ya que el área de vídeo del elemento es la que se usa para mostrar los subtítulos. Este es uno de los escenarios especiales en los que resulta útil reproducir audio dentro de un elemento de vídeo.

Si se usan servicios de subtitulado automático, es importante revisar el contenido generado para asegurarte de que representa fielmente el vídeo original.

Además del diálogo hablado, los subtítulos y las transcripciones también deben identificar la música y los efectos de sonido que transmiten información importante. Esto incluye la emoción y el tono:

14
00:03:14 --> 00:03:18
[Música de rock dramática]

15
00:03:19 --> 00:03:21
[susurrando] ¿Qué es eso a lo lejos?

16
00:03:22 --> 00:03:24
Es… es un…

16 00:03:25 --> 00:03:32
[Golpes fuertes]
[Vajilla resonando]

Los subtítulos no deben obstruir el sujeto principal del vídeo. Se pueden posicionar usando la configuración de cue align de VTT.

• Web Video Text Tracks Format (WebVTT)
• WebAIM: Captions, Transcripts, and Audio Descriptions
• Explicaciones de la Pauta 1.2 de MDN Understanding WCAG
• Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0
• Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0

Ejemplos

Fuente única

Este ejemplo reproduce un vídeo al activarse, proporcionando al usuario los controles de vídeo predeterminados del navegador para manejar la reproducción.

HTML

<!-- Ejemplo básico de vídeo -->
<!-- 'Big Buck Bunny', con licencia CC 3.0 de Blender Foundation. Alojado en archive.org -->
<!-- Póster de peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Lo sentimos, tu navegador no admite vídeos incrustados, pero no te preocupes,
  puedes
  <a href="https://archive.org/details/BigBuckBunny_124">descargarlo</a>
  y verlo con tu reproductor de vídeo favorito.
</video>

Resultado

Hasta que el vídeo comienza a reproducirse, se muestra en su lugar la imagen indicada en el atributo poster. Si el navegador no admite la reproducción de vídeo, se muestra el texto alternativo.

Varias fuentes

Este ejemplo se basa en el anterior, ofreciendo tres fuentes distintas para el contenido multimedia; esto permite ver el vídeo independientemente de los códecs de vídeo que admita el navegador.

HTML

<!-- Uso de varias fuentes como alternativas para una etiqueta de vídeo -->
<!-- 'Elephants Dream' de Orange Open Movie Project Studio, con licencia CC-3.0, alojado en archive.org -->
<!-- Póster alojado en Wikimedia -->
<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Lo sentimos, tu navegador no admite vídeos incrustados, pero no te preocupes,
  puedes
  <a
    href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    download="ed_1024_512kb.mp4">
    descargar el MP4
  </a>
  y verlo con tu reproductor de vídeo favorito.
</video>

Resultado

Primero se intenta con AVI. Si no se puede reproducir, se intenta con MP4. Se muestra un mensaje alternativo si no se admite el elemento de vídeo, pero no si fallan todas las fuentes.

Algunos tipos de archivo multimedia te permiten proporcionar información más específica mediante el parámetro codecs como parte de la cadena de tipo del archivo. Por ejemplo, video/webm; codecs="vp8, vorbis" indica que el archivo es un vídeo WebM que usa VP8 para el vídeo y Vorbis para el audio.

Resumen técnico

Especificaciones

Compatibilidad con navegadores

Véase también

• Guía de tipos y formatos multimedia en la web

  • Formatos de contenedor multimedia (tipos de archivo)
  • Guía de códecs de vídeo web
  • Guía de códecs de audio web

• Posicionar y ajustar el tamaño de la imagen dentro de su marco: object-position y object-fit

• <audio>

• Vídeo y audio HTML

• Manipular vídeo mediante canvas

• Configurar servidores para contenido multimedia Ogg