Audio and video share patterns: container elements, nested source candidates, optional track elements for timed text, and fallback markup for unsupported scenarios.
Codec landscape
- Video: commonly AV1/VP9/H.264 depending on licensing and hardware.
- Audio: AAC, Opus, MP3 legacy.
- Always supply alternatives—no single codec plays everywhere.
Tracks
kind="subtitles"translation assistance.kind="captions"includes sound effects for deaf users.kind="descriptions"deliver audio descriptions for visual action.
Fallback content
Place paragraph text or download links between opening/closing media tags for browsers without codec support.
Licensing + autoplay policy
Unmuted autoplay is largely blocked—marketing “hero videos” should not assume sound; captions remain mandatory ethically and often legally.
Track kind values
| kind | Purpose |
|---|---|
| subtitles | Translation of dialogue (may omit non-speech audio). |
| captions | Includes sound effects & speaker IDs for deaf/hard-of-hearing users. |
| descriptions | Textual description of important visuals (often read in gaps). |
| chapters | Navigation markers in the timeline. |
| metadata | Machine-oriented cues (rare in hand-authored pages). |
Example — dual source codecs
<video controls width="640" height="360" poster="/cover.jpg">
<source src="/clip.webm" type="video/webm">
<source src="/clip.mp4" type="video/mp4">
<p><a href="/clip.mp4">Download MP4</a></p>
</video>Browser picks the first playable source; always provide a download fallback.
Important interview questions and answers
- Q: Why should video/audio include fallbacks and tracks?
A: Codec support differs by browser and captions/transcripts are essential for accessibility and compliance. - Q: When is inline SVG better than bitmap icons?
A: For scalable, styleable, lightweight icons that inherit CSS and remain sharp across densities. - Q: What is a common embed risk with third-party iframes?
A: Privacy/performance overhead and policy issues; lazy-load and apply consent/security constraints where needed.
Tip: Always include captions/transcripts for video when speech carries information.