Audio and video

HTML can embed audio and video with native elements. You do not need a plugin or a heavy JavaScript player for basic cases.

Use audio for 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. You should see a small player bar in the page. Content inside the element is a fallback for browsers that cannot play the format.

Use video for moving pictures:

<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 pick a format it supports. The poster image shows before playback starts. The track element adds captions for people who cannot hear the audio or prefer to read it.

Avoid autoplaying media with sound. It is disruptive, burns mobile data unexpectedly, and browsers often block it anyway. When autoplay is necessary for a silent visual effect, browsers generally require muted, but ask whether a static image would work just as well.

Always give visitors control. Native controls are accessible by default and familiar across devices. If you build a custom player later, you inherit a lot of keyboard and screen-reader work that the browser already solved.

Place media files in a folder next to your HTML or in a predictable subfolder like media/. Broken paths are the most common reason an <audio> or <video> element shows an empty box. Check the Network panel if playback fails. A 404 on the file URL tells you exactly what went wrong.

If you embed a short clip on your my-page project, test with controls first and confirm you can pause with the keyboard before worrying about styling.

Quick check

Start quiz

Result

You got of right.

Try again