The <video> element streams visual media with optional audio tracks.
<video controls width="1280" height="720" poster="/talk-cover.jpg" preload="metadata">
<source src="/talk.webm" type="video/webm">
<source src="/talk.mp4" type="video/mp4">
<track kind="captions" src="/talk-en.vtt" srclang="en" label="English">
<p><a href="/talk.mp4">Download the MP4</a>.</p>
</video>Attributes
controls: expose native UI (custom skins require full accessibility parity).poster: preview frame before playback.muted/playsinline: influence autoplay policies on mobile.preload: hints (none,metadata,auto)—honor bandwidth budgets.
Captions
Provide WebVTT tracks for spoken content; laws and policies increasingly require captions for public media.
Streaming vs static files
Adaptive streaming (HLS/DASH) typically relies on JavaScript players—HTML alone serves progressive downloads.
Live demo — sample file (CC0 from MDN)
Requires network; uses a short open clip for learning.
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.
Pitfall: Autoplay with sound harms UX—respect muted and user preferences.