¿Cómo funcionan los elementos de audio y vídeo?

Question

Accepted Answer

`<audio>` y `<video>` incrustan medios de forma nativa, con controles integrados y una API de JavaScript — sin necesidad de plugins.

```html
<video
  controls                    
  width="640"
  poster="thumbnail.jpg"      
  preload="metadata"          
>
  <source src="video.webm" type="video/webm" /> 
  <source src="video.mp4" type="video/mp4" />   
  <track kind="captions" src="caps.vtt" srclang="en" label="English" /> 
  Your browser does not support video.          
</video>
```

## Atributos clave

- **`controls`** — sin él, no aparece ninguna interfaz de usuario (controlarías mediante JS).
- **múltiples `<source>`** — el navegador utiliza el primer formato que soporta (WebM/MP4 para compatibilidad entre navegadores).
- **`poster`** — imagen de marcador de posición antes de la reproducción.
- **`preload`** — `none` / `metadata` / `auto`; usa `metadata` para evitar descargar archivos grandes hasta que sea necesario.
- **`autoplay muted loop`** — para vídeos de fondo (la mayoría de navegadores **requieren `muted`** para permitir la reproducción automática).
- **`<track>`** — subtítulos/leyendas para accesibilidad (un archivo `.vtt`).

## Control con JavaScript

```js
const v = document.querySelector("video");
v.play();           // returns a promise (may reject if autoplay blocked)
v.pause();
v.currentTime = 30; // seek to 30 seconds
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));
```

`<audio>` funciona de forma idéntica, solo que sin el marco visual/póster.

## Por qué es importante

Los elementos de medios nativos te proporcionan reproducción compatible entre navegadores, accesibilidad (subtítulos mediante `<track>`) y una API de JavaScript completa para reproductores personalizados.

Conocer el patrón de fallback de formato, la regla `muted`-para-autoplay y `preload` para el rendimiento cubre los aspectos prácticos esenciales de la incrustación de medios.