Audio & Video
Embed audio players and video players directly into HTML — no plugins required.
1. Introduction
Before HTML5, playing audio or video on a web page required Flash, QuickTime, or other plugins. Today, HTML5 provides native <audio> and <video> elements — built right into the browser, no plugins needed.
These elements give users a built-in media player with play, pause, volume, and fullscreen controls.
2. Theory
The <audio> Element
<!-- Simplest audio player -->
<audio src="music.mp3" controls></audio>
<!-- With multiple source formats for browser compatibility -->
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
<p>Your browser does not support audio. <a href="music.mp3">Download the audio file</a>.</p>
</audio>Audio Attributes
| Attribute | What It Does |
|---|---|
controls | Shows the browser's built-in audio controls (play/pause, volume, time) |
autoplay | Starts playing automatically (most browsers block unless also muted) |
loop | Loops the audio forever |
muted | Starts muted |
preload | auto/metadata/none — how much to pre-load before playback |
The <video> Element
<!-- Basic video player -->
<video src="movie.mp4" controls width="800" height="450"></video>
<!-- Full-featured video with multiple sources and subtitles -->
<video
controls
width="800"
height="450"
poster="thumbnail.jpg"
preload="metadata">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<!-- Subtitles / captions -->
<track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English" default>
<track kind="subtitles" src="subtitles-es.vtt" srclang="es" label="Español">
<p>Your browser does not support video. <a href="movie.mp4">Download the video</a>.</p>
</video>Video Attributes
| Attribute | What It Does |
|---|---|
controls | Shows browser controls: play, pause, volume, fullscreen, time |
width / height | Sets video player dimensions in pixels |
poster | Image shown before the video plays (thumbnail) |
autoplay | Plays automatically — requires muted in most browsers |
loop | Loops video continuously |
muted | Starts with no audio |
playsinline | Plays inline on iOS instead of fullscreen |
preload | How much to pre-load: auto, metadata, or none |
The <source> Element
Multiple <source> elements provide fallbacks. The browser plays the first format it supports:
| Format | MIME Type | Support |
|---|---|---|
| MP4 (H.264) | video/mp4 | All modern browsers — primary format |
| WebM (VP8/VP9) | video/webm | Chrome, Firefox, Edge — open format |
| OGG (Theora) | video/ogg | Firefox — less common |
| MP3 | audio/mpeg | All modern browsers |
| OGG (Vorbis) | audio/ogg | Chrome, Firefox |
| WAV | audio/wav | All modern browsers — large file size |
The <track> Element — Subtitles and Captions
Adds text tracks (subtitles, captions, descriptions) to video:
<track kind="subtitles" src="subs-en.vtt" srclang="en" label="English" default>| kind value | Purpose |
|---|---|
subtitles | Translation of dialogue |
captions | Dialogue + sound effects description (for deaf users) |
descriptions | Describes what is happening on screen (for blind users) |
chapters | Chapter titles for navigation |
3. Real World Example
YouTube, Netflix, and Vimeo all use HTML5 video. The <video> element replaced Flash players entirely. Background videos on website hero sections use autoplay muted loop playsinline — this combination works across all browsers.
4. Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Page</title>
</head>
<body>
<h1>Our Media</h1>
<!-- ===== PODCAST PLAYER ===== -->
<section>
<h2>Latest Podcast Episode</h2>
<p>Episode 42: The Future of Web Development</p>
<audio controls preload="metadata">
<source src="episode-42.mp3" type="audio/mpeg">
<source src="episode-42.ogg" type="audio/ogg">
<p>Your browser does not support audio.
<a href="episode-42.mp3">Download MP3</a></p>
</audio>
</section>
<!-- ===== VIDEO PLAYER ===== -->
<section>
<h2>Introduction Video</h2>
<video
controls
width="720"
height="405"
poster="video-thumbnail.jpg"
preload="metadata">
<source src="intro.mp4" type="video/mp4">
<source src="intro.webm" type="video/webm">
<track kind="captions" src="captions-en.vtt" srclang="en" label="English Captions" default>
<p>Your browser does not support video.
<a href="intro.mp4">Download MP4</a></p>
</video>
</section>
<!-- ===== BACKGROUND VIDEO (no controls) ===== -->
<section>
<h2>Background Video Hero</h2>
<video autoplay muted loop playsinline width="1280" height="720">
<source src="background.mp4" type="video/mp4">
</video>
</section>
</body>
</html>5. Code Breakdown
| Code | What It Does |
|---|---|
controls | Renders the browser's native media controls |
preload="metadata" | Only loads metadata (duration, dimensions) — not the full file. Saves bandwidth. |
<source src="..." type="..."> | Offers the browser a format. Browser picks the first it can play. |
Fallback <p> | Shown if the browser supports neither format. Always include a download link. |
poster="thumbnail.jpg" | Static image shown before the video plays — like a video thumbnail |
<track kind="captions"> | Adds captions (dialogue + sound descriptions) for accessibility |
autoplay muted loop playsinline | Background video pattern: auto-starts, no sound, loops, stays inline on mobile |
6. Common Mistakes
Most browsers block autoplay unless the video is also muted. Autoplaying audio surprises and annoys users. Only use autoplay for background videos and always pair it with muted.
Video without captions is inaccessible to deaf and hard-of-hearing users. It also fails WCAG accessibility guidelines. Always include a <track kind="captions">.
Video files are huge. Self-hosting uses enormous bandwidth. For most sites, embed from YouTube or Vimeo (using iframes — next lesson) rather than hosting video files directly.
7. Best Practices
8. Practice Exercise
Create media.html with:
- An audio player using any MP3 file (you can download a free sample from freesound.org)
- A video player using any MP4 (or use a YouTube video downloaded via a legal tool)
- Set a poster image on the video
- Include text fallback content with download links for both elements
- Add a section demonstrating the background video pattern (autoplay muted loop)
9. Assignment
Build a "Video Course" landing page. It should have a promotional video at the top with a poster image, a sample audio clip from the instructor, a playlist section listing 5 lesson videos (even if the src files don't exist — focus on the HTML structure), and a section explaining that captions are available (include a mock track element).
10. Interview Questions
Q1: What is the purpose of the <source> element inside <audio> and <video>?
Answer: <source> provides multiple file format alternatives. The browser plays the first format it supports. This ensures cross-browser compatibility — for example, providing both MP4 and WebM covers all modern browsers.
Q2: What does the controls attribute do?
Answer: The controls attribute tells the browser to render its native media controls — play/pause button, seek bar, volume control, and for video, a fullscreen button. Without it, media plays programmatically only (via JavaScript) with no visible UI.
Q3: Why should you never autoplay audio?
Answer: Autoplaying audio is extremely disruptive — it surprises users, can interfere with their own audio, and is inaccessible for users who rely on screen readers. Most browsers now block autoplay with sound by default. Only autoplay video that is muted (for background/hero video effects).
Q4: What is the <track> element and why is it important for accessibility?
Answer: <track> adds text tracks to video — subtitles (translated dialogue), captions (dialogue + sound descriptions), or descriptions (for screen reader users). Without captions, deaf and hard-of-hearing users cannot understand the video content. Adding captions is a legal requirement under accessibility laws in many countries.
11. Additional Resources
- MDN — The Video Element
- MDN — The Audio Element
- Freesound.org — Free audio samples for practice