video, audio & Captions

<video> embeds a video clip. <audio> embeds a sound file. Both use the same set of core attributes: controls shows the browser's built-in playback UI, autoplay starts playback immediately (blocked by browsers unless muted is also set), loop repeats, muted silences audio, poster sets a placeholder image, and preload hints how much the browser should fetch before the user presses play.

<source> provides format alternatives inside <video> or <audio>, following the same first-match logic as <picture>. <track> links a WebVTT text-track file to the media element. The kind attribute identifies the track's purpose: captions for synchronized text including sound effects and speaker identification, subtitles for spoken dialogue only, chapters for navigation, descriptions for audio descriptions of visual content, and metadata for machine-readable data.

Captions are a WCAG 2.1 Level AA requirement for all prerecorded video that has audio. They serve users who are deaf or hard of hearing, users watching in a noisy or silent environment, and non-native speakers following along. Treating captions as optional puts the site in legal risk in jurisdictions with web accessibility laws, and it excludes a significant share of viewers.

The distinction between captions and subtitles matters. Subtitles carry spoken dialogue. Captions carry dialogue plus sound effects, music cues, and speaker identification: everything a viewer needs to understand the audio track without hearing it. A video about an accessibility lecture needs captions, not subtitles, so that [applause] and [laugh] are included.

Add controls to every video and audio element that users should be able to interact with. Without it, there is no play button, no seek bar, and no volume control. Add width and height to reserve space and prevent layout shift. Use poster to show a meaningful image while the video is loading rather than a blank box.

For format compatibility, nest <source> elements inside <video>. List the modern format first: <source src="film.webm" type="video/webm"> then <source src="film.mp4" type="video/mp4">. The browser picks the first type it can decode; the type attribute lets it skip formats it does not support without downloading them.

Attach captions with <track kind="captions" src="captions.vtt" srclang="en" label="English" default>. The src points to a WebVTT file, a plain-text format with timestamps and cue text. The default attribute activates this track when the page loads. A viewer can switch tracks using the browser's native caption controls.