HTML Media
HTML5 made multimedia a first-class citizen of the web. Before HTML5, embedding video and audio required third-party plugins like Flash or Silverlight. Now, native <video> and <audio> elements handle media playback directly in the browser — no plugins needed.
Media Elements Overview
| Element | Purpose | Introduced |
|---|---|---|
<img> |
Display images | HTML 1.0 |
<video> |
Play video files | HTML5 |
<audio> |
Play audio files | HTML5 |
<source> |
Multiple format options | HTML5 |
<track> |
Subtitles/captions | HTML5 |
<picture> |
Responsive images | HTML5 |
<iframe> |
Embed external content | HTML 4.0 |
Media Formats
Video Formats
| Format | Extension | MIME Type | Browser Support |
|---|---|---|---|
| MP4 (H.264) | .mp4 |
video/mp4 |
All modern browsers |
| WebM | .webm |
video/webm |
Chrome, Firefox, Edge |
| Ogg | .ogg |
video/ogg |
Chrome, Firefox |
Audio Formats
| Format | Extension | MIME Type | Browser Support |
|---|---|---|---|
| MP3 | .mp3 |
audio/mpeg |
All modern browsers |
| WAV | .wav |
audio/wav |
All modern browsers |
| Ogg Vorbis | .ogg |
audio/ogg |
Chrome, Firefox, Edge |
| AAC | .aac |
audio/aac |
All modern browsers |
| WebM | .weba |
audio/webm |
Chrome, Firefox, Edge |
Tip: MP4 (H.264) for video and MP3 for audio are the safest choices — supported by every modern browser. Provide WebM as a secondary option for better compression.
The <source> Element
Provide multiple formats so the browser picks the first one it supports:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video>
Browser format selection:
┌────────────────────────────────────┐
│ Can play video/mp4? │
│ YES → Play video.mp4 │
│ NO → Can play video/webm? │
│ YES → Play video.webm │
│ NO → Show fallback text │
└────────────────────────────────────┘
Common Media Attributes
| Attribute | <video> |
<audio> |
Purpose |
|---|---|---|---|
controls |
✅ | ✅ | Show play/pause/volume UI |
autoplay |
✅ | ✅ | Start playing automatically |
muted |
✅ | ✅ | Start muted |
loop |
✅ | ✅ | Replay when finished |
preload |
✅ | ✅ | How much to buffer |
poster |
✅ | ❌ | Preview image before play |
width/height |
✅ | ❌ | Player dimensions |
preload Values
| Value | Behavior |
|---|---|
auto |
Browser decides (usually buffers) |
metadata |
Load only duration and dimensions |
none |
Don’t preload anything |
Warning: Most browsers block autoplay unless the media is also muted. This prevents pages from unexpectedly blaring audio at users.
Responsive Media
<!-- Video scales to container width -->
<video controls style="width: 100%; max-width: 800px; height: auto;">
<source src="tutorial.mp4" type="video/mp4">
</video>
What’s Next?
Now that you understand HTML5 media fundamentals, let’s dive into the <video> element in detail — controls, styling, JavaScript interaction, and subtitles.
