Goal
You’ll be able to embed audio and video with proper fallback and accessibility considerations, and understand why native HTML media elements are usually preferable to embedding a third-party player when possible.
Learn
HTML5 provides native <audio> and <video> elements, removing the historical need for third-party plugins:
<video controls width="640"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser doesn't support video playback. </video>
The controls attribute adds the browser’s built-in play/pause/volume interface — without it, the video exists but offers the user no way to interact with it at all. Multiple <source> elements let the browser pick whichever format it actually supports, since not every browser supports every video codec; the text after the last source element is a fallback shown only if the browser supports neither format at all.
<audio controls> <source src="podcast.mp3" type="audio/mpeg"> </audio>
<audio> follows the same pattern, minus the width/visual dimensions, since it has no visual content beyond the controls themselves.
For video specifically, captions matter genuinely for accessibility, not just as a nice-to-have:
<video controls> <source src="movie.mp4" type="video/mp4"> <track kind="captions" src="captions.vtt" srclang="en" label="English"> </video>
<track> adds a caption file, benefiting deaf/hard-of-hearing users, anyone watching without sound in a public space, and search engines that can index the caption text (since they can’t “watch” the video content itself).
Decision Task
A video element is added to a page but the developer forgets the controls attribute. Before reading on: what happens from the user’s perspective?
Show Answer
The video loads and exists on the page, but the user has no built-in way to play, pause, or adjust volume at all — it’s effectively unusable without controls (unless separately controlled via JavaScript), since controls specifically adds the browser’s built-in playback interface.
Common Mistake
Providing only one video format/source, assuming it works everywhere. Different browsers historically support different video codecs inconsistently; providing multiple <source> elements with different formats lets the browser automatically choose one it actually supports, rather than the video simply failing to play at all for some users.
Practice Questions
1. Write a basic audio element with controls, sourcing an mp3 file called “song.mp3”.
Show Answer
<audio controls><source src="song.mp3" type="audio/mpeg"></audio>
2. Why does providing multiple <source> elements with different video formats matter practically?
Show Answer
Different browsers support different video codecs inconsistently; multiple sources let the browser automatically pick one it actually supports, rather than failing to play for users whose browser doesn’t support a single hardcoded format.
3. What does the <track kind=”captions”> element add to a video, and name two different groups of users who benefit from it.
Show Answer
Caption text synced to the video; benefits deaf/hard-of-hearing users, and anyone watching without sound in a public/quiet space (also indirectly helps search engines index the spoken content).
4. True or False: without the controls attribute, a video element won’t load or display at all.
Show Answer
False — it still loads and displays, but offers no built-in way for the user to play, pause, or adjust it without separate custom controls.
5. Why is native HTML video generally preferable to a third-party embedded player when the choice is available?
Show Answer
It avoids dependency on external plugins/scripts, generally loads more reliably and accessibly, and gives more direct control over captions and fallback behavior without relying on a third party’s implementation choices.
Try It Yourself
Without looking back, write a video element with controls, two source elements (mp4 and webm formats) for a file “demo”, and appropriate fallback text for browsers supporting neither format.
Show Answer
<video controls><source src="demo.mp4" type="video/mp4"><source src="demo.webm" type="video/webm">Your browser doesn't support video playback.</video>
Quick Check
1. What attribute adds the browser’s built-in play/pause/volume interface to a video or audio element?
Show Answer
controls
2. Why might a video element include multiple <source> elements?
Show Answer
To let the browser automatically choose a format/codec it actually supports, since browser codec support varies.
3. What element adds captions to a video?
Show Answer
<track kind=”captions”>
4. Name one group of users who specifically benefit from video captions.
Show Answer
Deaf/hard-of-hearing users (or anyone watching without sound, or search engines indexing spoken content).
5. What’s shown to a user if their browser supports none of the provided video source formats?
Show Answer
The fallback text/content placed after the last <source> element, inside the video tag.