How do the audio and video elements work?

Question

Accepted Answer

`<audio>` and `<video>` embed media natively, with built-in controls and a JavaScript API — no plugins needed.

```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>
```

## Key attributes

- **`controls`** — without it, no UI appears (you'd control via JS).
- **multiple `<source>`** — the browser uses the first format it supports (WebM/MP4 for cross-browser).
- **`poster`** — placeholder image before play.
- **`preload`** — `none` / `metadata` / `auto`; use `metadata` to avoid downloading large files until needed.
- **`autoplay muted loop`** — for background videos (most browsers **require `muted`** to allow autoplay).
- **`<track>`** — captions/subtitles for accessibility (a `.vtt` file).

## Controlling with 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>` works identically, just without the visual frame/poster.

## Why it matters

Native media elements give you cross-browser playback, accessibility (captions via `<track>`), and a full JS API for custom players.

Knowing the format-fallback pattern, the `muted`-for-autoplay rule, and `preload` for performance covers the practical essentials of embedding media.