Audio & Video: <audio>, <video>, and <source>

HTML provides native elements for embedding audio and video directly in a page — no plugins required. The browser handles playback with its own built-in controls.

<audio>

<audio> embeds a sound file. It is not self-closing — it has an opening and closing tag. The src attribute points to the audio file, and the controls attribute adds the browser’s built-in play/pause/volume interface.

<audio src="sounds/birdsong.mp3" controls></audio>

controls is a boolean attribute. Just writing the word is enough — no value needed.

Fallback text inside the element is shown if the browser does not support <audio>:

<audio src="sounds/birdsong.mp3" controls>
  Your browser does not support the audio element.
</audio>

<video>

<video> embeds a video file. It works the same way as <audio>, with the same controls attribute, and accepts width and height to set the display size.

<video src="videos/trail-walk.mp4" controls width="640" height="360">
  Your browser does not support the video element.
</video>

• width and height are in pixels. Setting both prevents layout shift while the video loads.
• Like <audio>, fallback text inside the element appears if the browser cannot play the file.

<source> — multiple format support

Different browsers support different media formats. The <source> element lets you offer multiple file formats inside a single <audio> or <video> element. The browser picks the first one it can play.

<video controls width="640" height="360">
  <source src="videos/trail-walk.webm" type="video/webm">
  <source src="videos/trail-walk.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

When using <source>, remove src from the parent element. Each <source> gets its own src and type.

The same pattern works for audio:

<audio controls>
  <source src="sounds/birdsong.ogg" type="audio/ogg">
  <source src="sounds/birdsong.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

What controls provides

Without controls, the media element exists on the page but has no visible interface. The user cannot play it. Always include controls — never autoplay media without user interaction.

The browser’s native controls include:

• Play / Pause
• Volume
• Seek bar
• Time display
• For video: fullscreen toggle

These controls are handled entirely by the browser. No CSS or JavaScript is needed.

Exercise

Open index.html in VS Code.

You are going to add an <audio> element to one of your <section> elements inside <main>. You do not need a real audio file — use a placeholder path like sounds/example.mp3 for now. The structure is what matters.

1. Find a <section> where audio would make sense for your topic.
2. After the section’s <p>, add an <audio> element with controls and a src path:

<section>
  <h2>Sounds of the Trail</h2>
  <p>Close your eyes and listen to what a forest trail sounds like at dawn.</p>
  <audio src="sounds/forest-dawn.mp3" controls>
    Your browser does not support the audio element.
  </audio>
</section>

3. Save and open index.html in your browser. An audio player will appear — clicking Play will fail because the file does not exist, but the player itself should render.

Recap

• <audio> embeds sound. <video> embeds video. Neither is self-closing.
• controls adds the browser’s built-in playback interface. Always include it.
• Fallback text inside the element is shown if the browser cannot play the media.
• <source> inside <audio> or <video> offers multiple formats. The browser picks the first it supports.
• Set width and height on <video> to prevent layout shift.