Images and media

Audio and video

Embed audio and video with native controls, fallback sources, captions, and behavior that respects the visitor.

8 minute lesson

~~~

Use audio to play sound:

<audio controls src="interview.mp3">
  <a href="interview.mp3">Download the interview</a>
</audio>

The controls attribute gives the visitor play, pause, volume, and seeking controls.

Use video for video:

<video controls width="960" height="540" poster="route-poster.jpg">
  <source src="route.webm" type="video/webm">
  <source src="route.mp4" type="video/mp4">
  <track
    kind="captions"
    src="route-en.vtt"
    srclang="en"
    label="English"
    default
  >
  <p><a href="route.mp4">Download the route video</a>.</p>
</video>

Multiple source elements let the browser choose a format it supports. The track adds captions for people who cannot hear the audio or prefer to read it.

Avoid autoplaying media with sound. It is disruptive, uses data unexpectedly, and browsers often block it. When autoplay is necessary for a silent visual effect, browsers generally require muted, but consider whether a static image would work better.

Quick check

Result

You got of right.

Lesson completed