Audio and Video

Modern browsers can play audio and video natively — no Flash, no plugins, just HTML.

Video

<video controls width="640">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  Your browser doesn't support HTML video.
</video>

• controls adds the browser's default play/pause/volume UI. Without it, the video has no visible controls at all.
• Multiple <source> tags let the browser pick whichever format it supports — it tries them in order and uses the first one it can play.
• Text after the last <source> is a fallback shown only in browsers old enough not to support <video> at all (extremely rare today, but still good practice).

Useful additional attributes:

<video controls width="640" poster="thumbnail.jpg" muted loop autoplay playsinline>
  <source src="movie.mp4" type="video/mp4" />
</video>

• poster — an image shown before playback starts.
• muted + autoplay — browsers generally only allow autoplay if the video is also muted (a deliberate restriction to stop pages blasting sound on load).
• loop — restarts the video when it ends.
• playsinline — on mobile Safari, keeps the video inline instead of forcing fullscreen.

Audio

<audio controls>
  <source src="podcast-episode.mp3" type="audio/mpeg" />
  <source src="podcast-episode.ogg" type="audio/ogg" />
  Your browser doesn't support HTML audio.
</audio>

Same pattern as <video> — controls, multiple <source> fallbacks, and a text fallback for unsupported browsers.

Captions and subtitles

For accessibility, video should include captions using <track>:

<video controls width="640">
  <source src="movie.mp4" type="video/mp4" />
  <track kind="captions" src="captions-en.vtt" srclang="en" label="English" default />
</video>

<track> points to a WebVTT (.vtt) file containing timestamped caption text. The default attribute makes it active automatically — without it, viewers would need to turn captions on manually through the player controls.