Why native video/audio beat a plugin
A black box bolted onto the page
Before HTML5, playing video in a browser meant embedding a plugin (almost always Adobe Flash) as an opaque rectangle the browser handed control to entirely. The DOM, the accessibility tree, keyboard navigation and CSS all stopped at that rectangle's edge. Whatever happened inside was invisible to the rest of the page.
<!-- The old way — a plugin, not part of the page -->
<object data="player.swf" type="application/x-shockwave-flash">
<param name="movie" value="player.swf">
</object>
What <video> and <audio> are
<video src="demo.mp4" controls></video>
This is a real DOM node, as in Lesson 2 of the DOM basics course. It sits in the accessibility tree and the tab order and has its own JavaScript API (.play(), .pause(), .currentTime), with no plugin. No Flash, no separate runtime to install, no black box the rest of the page can't see into.
What this buys you
| Capability | Plugin era | Native <video>/<audio> |
|---|---|---|
| Keyboard accessible by default | No: plugin-dependent, often broken | Yes: Tab reaches it, native controls respond to keys |
| Screen reader can identify it at all | No: an opaque black box | Yes: it's in the accessibility tree; captions get Lesson 5 |
| Styleable with CSS | Barely | Yes: same rules as everything else on the page |
| Works without a separate plugin install | No | Yes: built into every modern browser |
| Scriptable from ordinary JavaScript | Only through fragile bridges | Yes: a standard, documented API |
The native controls you get for free
<video src="demo.mp4" controls width="640" height="360"></video>
controls alone produces a complete player (play/pause, a scrub bar, volume, fullscreen) with no JavaScript or CSS. Each browser's controls look a little different. All of them are keyboard-reachable and labeled for screen readers, a bar Flash-era players rarely cleared.
How this course is organized
- Lesson 2:
videoand the anatomy of a player:src,poster,controls, dimensions - Lesson 3:
audio, the same idea without the picture - Lesson 4: autoplay,
muted, and why browsers block it - Lesson 5: captions and subtitles with
track, an accessibility requirement - Lesson 6: fallback content and format support across browsers
- Lesson 7: assembling one real product demo video end to end
Key takeaways
- Pre-HTML5 video relied on plugins (typically Flash) that were opaque to the DOM, accessibility tree, keyboard navigation, and CSS entirely.
<video>/<audio>are real DOM nodes with their own accessibility role, keyboard support, and JavaScript API, built natively into every modern browser.- The
controlsattribute alone produces a fully functional, accessible native player with zero JavaScript or CSS required. - This course covers the full native media stack: player anatomy, autoplay's real constraints, accessible captions, and format fallbacks.
Keep going with lesson 2
video: the anatomy of a video player
Explains src, controls, poster, width and height, plus multiple source children for WebM and MP4 fallback.
A free account also gives you the quizzes, your progress and notes, and the discussion.