LESSON 20

Audio and Video

Learning objective: Embed playable audio and video with native HTML elements.

Understand

HTML can play media without any plugins.

The <audio> and <video> elements play media natively. Add the controls attribute to show play, pause, and volume. Use one or more <source> children to offer the file, and include fallback text for old browsers.

Analogy: These elements are like a built-in media player you drop straight onto the page.

See It in Action

A video with controls:

<video controls width="320">
  <source src="clip.mp4" type="video/mp4">
  Your browser can't play this video.
</video>
How it works: controls shows the player UI, <source> gives the file and format, and the text is shown only if the browser cannot play it.

Try It Yourself

  1. Embed an audio file with controls.
  2. Embed a video with controls and a width.
  3. Add fallback text and test in the browser.

Quick Quiz

Which attribute shows the play and pause interface?

Challenge

Add a playable audio clip and a video clip to a page.

Success condition: Both media elements play with visible controls.