HTML Audio and Video
1. Introduction
HTML5 introduced native audio and video elements, eliminating the need for Flash or third-party plugins. The <audio> and <video> elements allow you to embed media directly in a page with built-in browser controls, while offering programmable JavaScript APIs for custom players. This lesson covers embedding, attributes, multiple format fallbacks, and accessibility requirements for media.
2. Concept
Audio vs Video Element Comparison
| Feature | <audio> | <video> |
|---|---|---|
| Displays visuals | No | Yes |
| Requires width/height | No | Recommended |
| Subtitles/captions | Yes (via <track>) | Yes (via <track>) |
| poster attribute | N/A | Yes — thumbnail image |
| Common formats | MP3, OGG, WAV | MP4 (H.264), WebM, OGG |
<track> element for video content. This is required by WCAG 2.1 Level AA for pre-recorded video with audio.<source> elements with different formats (e.g., WebM and MP4) to ensure maximum browser compatibility. The browser plays the first format it supports.autoplay without also setting muted. Most browsers block autoplay with audio by default. Autoplaying sound without user consent is an accessibility and UX violation.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Demo</title>
</head>
<body>
<!-- Audio element with controls -->
<h2>Podcast Episode 42</h2>
<audio controls>
<source src="/audio/episode-42.mp3" type="audio/mpeg">
<source src="/audio/episode-42.ogg" type="audio/ogg">
<p>Your browser does not support the audio element.
<a href="/audio/episode-42.mp3">Download the audio file</a>.
</p>
</audio>
<!-- Video element with controls, poster, and subtitles -->
<h2>Introduction Video</h2>
<video
controls
width="800"
height="450"
poster="/images/video-thumbnail.jpg"
preload="metadata"
>
<source src="/video/intro.webm" type="video/webm">
<source src="/video/intro.mp4" type="video/mp4">
<track
kind="subtitles"
src="/captions/intro-en.vtt"
srclang="en"
label="English"
default
>
<p>Your browser does not support HTML5 video.
<a href="/video/intro.mp4">Download the video</a>.
</p>
</video>
</body>
</html>
4. How It Works
Step 1 — controls Attribute
The boolean controls attribute renders the browser’s native playback UI (play/pause, volume, seek bar). Without it, the media is invisible to sighted users unless you build custom controls with JavaScript.
Step 2 — Multiple source Fallbacks
The browser reads <source> elements in order and plays the first format it understands. Providing WebM (better compression) first and MP4 (wider support) second is a common pattern.
Step 3 — poster Attribute
poster="/images/video-thumbnail.jpg" displays a static image before the video plays. Without this, the browser shows either a blank frame or the first video frame.
Step 4 — track for Captions
The <track> element links a WebVTT (.vtt) subtitle file. kind="subtitles" is for translations; kind="captions" is for accessibility (includes sound descriptions). The default attribute auto-enables that track.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Course Lesson: CSS Grid</title>
</head>
<body>
<article>
<h1>Lesson 3: CSS Grid Layout</h1>
<p>In this lesson we cover the fundamentals of CSS Grid.</p>
<figure>
<video
controls
width="960"
height="540"
poster="/lessons/css-grid-poster.jpg"
preload="metadata"
aria-label="Video lesson: CSS Grid Layout"
>
<source src="/lessons/css-grid.webm" type="video/webm">
<source src="/lessons/css-grid.mp4" type="video/mp4">
<track
kind="captions"
src="/lessons/css-grid-captions-en.vtt"
srclang="en"
label="English Captions"
default
>
<track
kind="subtitles"
src="/lessons/css-grid-subtitles-es.vtt"
srclang="es"
label="Spanish"
>
<p>Your browser does not support HTML5 video.
<a href="/lessons/css-grid.mp4">Download the MP4 video</a>.
</p>
</video>
<figcaption>Duration: 14 minutes 32 seconds</figcaption>
</figure>
<h2>Audio Summary</h2>
<audio controls preload="none">
<source src="/lessons/css-grid-summary.mp3" type="audio/mpeg">
<p>Your browser does not support audio.
<a href="/lessons/css-grid-summary.mp3">Download audio</a>.
</p>
</audio>
</article>
</body>
</html>
6. Common Mistakes
❌ Autoplay with audio (blocked by browsers)
<video autoplay src="intro.mp4"></video>✓ Use muted with autoplay, or omit autoplay entirely
<video autoplay muted loop src="hero-loop.mp4"></video>❌ No fallback content inside video/audio
<video controls src="film.mp4"></video>✓ Always include a text fallback between the tags
<video controls>
<source src="film.mp4" type="video/mp4">
<p>Your browser can't play this. <a href="film.mp4">Download</a></p>
</video>7. Try It Yourself
8. Quick Reference
| Attribute | Element | Effect |
|---|---|---|
controls |
audio, video | Show native playback controls |
autoplay |
audio, video | Play on load (needs muted) |
muted |
audio, video | Start without audio |
loop |
audio, video | Repeat playback |
poster |
video | Thumbnail before play |
preload |
audio, video | none / metadata / auto |
<track> |
audio, video | Subtitles/captions via VTT file |