🎬 Intermediate HTML

Audio & Video

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can add a working audio or video player with controls, provide multiple source formats, and include captions for accessibility.

It used to take clunky plugins to put media on a page. Today HTML does it natively with two elements: <audio> and <video>. They behave almost identically, so learn one and you know both.

1The video and audio elements

Give the element a src and the controls attribute to get a play/pause bar:

<video src="clip.mp4" controls width="480"></video>

<audio src="song.mp3" controls></audio>

Handy attributes (on both):

  • controls — show the play/pause/volume bar. Almost always include this.
  • poster (video only) — an image to show before play.
  • loop — repeat when finished.
  • muted — start silent.
Don't use autoplay with sound. It's jarring, eats mobile data, and browsers block it anyway. If you must autoplay (e.g. a background clip), it has to be muted.
An audio player
HTML
CSS
Live preview
What's happening: Even without a real source file here, the controls attribute draws the player bar. In a real project you'd point src at an audio file and it would play.
Key points
  • <video> and <audio> embed media natively — no plugins.
  • Add controls to show the play/pause bar.
  • Never autoplay with sound; if you autoplay, it must be muted.

2Multiple sources, fallbacks and captions

Different browsers support different file formats. Instead of one src, you can offer several <source> elements and let the browser pick the first it can play. Put plain fallback text between the tags for very old browsers:

<video controls width="480">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4"  type="video/mp4">
  Your browser can't play this video.
</video>

Captions = accessibility

Add a <track> with a captions file so deaf and hard-of-hearing viewers (and anyone watching with the sound off) can follow along:

<track kind="captions" src="clip.vtt" srclang="en" label="English">
Captions aren't optional polish — for a large audience they're the difference between usable and useless. They also help search engines understand your video.
Key points
  • Offer multiple <source> elements so the browser picks a format it supports.
  • Text between the tags is the fallback for browsers that can't play the media.
  • Add a <track kind="captions"> for captions — essential accessibility, not optional.

★ Practical: a captioned video block

Write the markup (in any playground) for:

  1. A <video> with controls and a width.
  2. Two <source> elements (webm and mp4).
  3. A fallback line of text for unsupported browsers.
  4. A <track kind="captions"> for an English captions file.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Semantic HTML
Next →
Iframes