Native Media Support
HTML5 introduced the <audio> and <video> elements, allowing browsers to play media natively without plugins like Flash.
Video Element
<video src="movie.mp4" width="640" height="360" controls></video>Audio Element
<audio src="song.mp3" controls></audio>Common Attributes
| Attribute | Purpose |
|---|---|
| controls | Shows the browser’s built-in play/pause/volume UI |
| autoplay | Starts playback automatically (often blocked unless muted) |
| loop | Restarts playback automatically when it ends |
| muted | Starts the media muted |
| poster | An image shown before a video starts playing (video only) |
| preload | Hints how much to load ahead of time ("none", "metadata", "auto") |
Multiple Sources
Browsers don’t all support the same video/audio formats. The <source> element lets you offer several formats — the browser picks the first one it supports.
Multiple Sources with Fallback
<video controls poster="preview.jpg">
<source src="movie.webm" type="video/webm" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>Captions and Subtitles
The <track> element adds text tracks like subtitles or captions to a video, loaded from a WebVTT (.vtt) file, improving accessibility for deaf and hard-of-hearing users.
Adding Captions
<video controls>
<source src="movie.mp4" type="video/mp4" />
<track
src="captions-en.vtt"
kind="captions"
srclang="en"
label="English"
default
/>
</video>Autoplay Restrictions
Most browsers block autoplaying video/audio with sound to avoid disrupting users. Autoplay generally only works reliably when the media is also muted.
Best Practice
Always provide the controls attribute unless you’re building fully custom playback controls with JavaScript, and include captions for video content whenever possible.