HTML Reference
<video> & <audio> — Native Media
Embed video and audio players in a page without plugins or JavaScript libraries.
Last updated: October 2026
Definition: The <video> element embeds a video player. The <audio> element embeds an audio player. Both support native controls, multiple sources for browser fallback, subtitles with <track>, and full keyboard/accessibility support.
🎬 Live Example
A native HTML video player. Click play — no JavaScript, no plugins.
💡 The same element handles playback, controls, subtitles, and multiple sources. No JavaScript required.
Basic Syntax
<!-- Video -->
<video src="movie.mp4" controls width="640" height="360">
Your browser does not support video.
</video>
<!-- Audio -->
<audio src="song.mp3" controls>
Your browser does not support audio.
</audio>Both elements are block-level. The text inside is fallback content shown only if the browser doesn't support the element.
⚙️ Attributes Reference
| Attribute | Applies to | Purpose |
|---|---|---|
src | Both | The file URL. Can be omitted if using <source> elements. |
controls | Both | Show play, pause, volume, and progress controls. |
autoplay | Both | Start playing automatically. Requires muted. |
muted | Both | Start muted. Required for autoplay in modern browsers. |
loop | Both | Restart playback when the media ends. |
preload | Both | none / metadata / auto. How much to load upfront. |
poster | video only | Thumbnail image before playback. |
width / height | video only | Dimensions. Prevents layout shift. |
playsinline | video only | iOS: play inline instead of fullscreen. |
crossorigin | Both | CORS settings for cross-origin media. |
controlslist | Both | Chrome-only: hide specific controls like download. |
Multiple Sources with <source>
Different browsers support different formats. Provide multiple sources for maximum compatibility.
<video controls width="640">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support video.
<a href="movie.mp4">Download the movie</a> instead.
</video>The browser tries each source in order and uses the first one it can play.
Recommended order:
- WebM — smallest size, best browser support (Chrome, Firefox, Edge).
- MP4 — universal fallback including Safari and iOS.
- Ogg — legacy fallback.
Silent Background Video
Autoplay requires muted in all modern browsers. Combine them for hero background video.
<video
autoplay
muted
loop
playsinline
poster="hero-poster.jpg"
class="hero-bg"
>
<source src="hero.webm" type="video/webm">
<source src="hero.mp4" type="video/mp4">
</video>Why muted? Browsers block autoplay with sound because it disrupts the user. Muted autoplay is always allowed. Add a mute/unmute button if you need sound.
Subtitles and Captions with <track>
Add subtitles from a WebVTT file. This is critical for accessibility.
<video controls width="640">
<source src="talk.mp4" type="video/mp4">
<!-- Subtitles -->
<track
src="talk-en.vtt"
kind="subtitles"
srclang="en"
label="English"
default
>
<!-- Spanish subtitles -->
<track
src="talk-es.vtt"
kind="subtitles"
srclang="es"
label="Español"
>
<!-- Descriptive captions for deaf users -->
<track
src="talk-captions.vtt"
kind="captions"
srclang="en"
label="English (captions)"
>
</video>Track kinds:
subtitles— translates spoken content to another language.captions— includes sound effects for deaf users.descriptions— describes visual content for blind users.chapters— chapter navigation.metadata— information for JavaScript use.
Audio Player Examples
<!-- Basic audio player -->
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
Your browser does not support audio.
</audio>
<!-- Autoplay + loop (background music) -->
<audio autoplay loop>
<source src="ambient.mp3" type="audio/mpeg">
</audio>
<!-- Custom audio with JavaScript control -->
<audio id="player">
<source src="song.mp3" type="audio/mpeg">
</audio>
<button onclick="document.getElementById('player').play()">
Play
</button>
<button onclick="document.getElementById('player').pause()">
Pause
</button>Responsive Video with Aspect Ratio
Make videos responsive without breaking aspect ratio using CSS.
<div class="video-wrapper">
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>
</div>
<style>
.video-wrapper {
aspect-ratio: 16 / 9;
width: 100%;
max-width: 800px;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>The aspect-ratio property keeps the player in 16:9 no matter what screen size it renders on.
🎯 Video vs Audio Attributes
| Attribute | <video> | <audio> |
|---|---|---|
src | ✓ | ✓ |
controls | ✓ | ✓ |
autoplay | ✓ | ✓ |
muted | ✓ | ✓ |
loop | ✓ | ✓ |
preload | ✓ | ✓ |
poster | ✓ | ✗ |
width / height | ✓ | ✗ |
playsinline | ✓ | ✗ |
⚠️ Common Mistakes
- Autoplay with sound. Browsers block it. Always pair autoplay with muted, or you'll see the video never start.
- Missing controls. Without
controls, users can't play, pause, or seek. Only omit for silent background video with custom JS controls. - Forgetting the fallback text. The content inside
<video>shows when the browser doesn't support the element. Always add a download link. - Single source with no fallback. Different browsers support different formats. Always include at least WebM and MP4.
- No captions on videos with speech. Deaf and hard-of-hearing users can't access the content. This is also an accessibility lawsuit risk in many jurisdictions.
- Serving huge video files. A 50MB MP4 for a hero video is a performance killer. Compress, use WebM, and consider streaming services for large files.
- Not using
playsinlineon mobile. On iOS, videos open fullscreen by default. Addplaysinlineto play inline. - Preloading everything.
preload="auto"on every video wastes bandwidth. Usepreload="metadata"ornoneunless the video is guaranteed to play.
♿ Accessibility Notes
- Always add captions to videos with speech. Use the
<track kind="captions">element. This is required for WCAG AA compliance. - Add subtitles for other languages. Users who don't speak the primary language need subtitles.
- Add descriptions for videos with important visual content. Blind users need to know what's happening visually.
- Always show
controls. Users must be able to pause, mute, and seek — especially users with cognitive or motor disabilities. - Never autoplay with sound. It disrupts screen readers and users with cognitive disabilities.
- Provide a transcript. For podcasts and long videos, a text transcript is the gold standard for accessibility.
- Give the video a title or label. Screen readers announce the video element. Wrap it in a
<figure>with a<figcaption>for context.
❓ Frequently Asked Questions
What is the HTML <video> tag?
The <video> element embeds a video player directly into a web page. It supports playback controls, autoplay, looping, subtitles, and multiple video sources for different browsers. No JavaScript or plugin required.
What is the HTML <audio> tag?
The <audio> element embeds an audio player into a page. It works like the video element but for sound only. It supports the same attributes: controls, autoplay, loop, muted, and preload.
Why doesn't autoplay work?
Modern browsers block autoplay with sound. To autoplay a video, you must add the muted attribute. Muted autoplay is allowed because it doesn't disrupt the user. Use autoplay muted together for silent video backgrounds.
What is the poster attribute?
The poster attribute sets an image to display while the video is loading or before the user presses play. It acts as a thumbnail for the video player.
How do I add subtitles to a video?
Use the <track> element inside <video>. Point it to a WebVTT (.vtt) file with kind="subtitles" or kind="captions". This makes the video accessible to deaf and hard-of-hearing users and helps with SEO.