<audio> and <video> embed media natively, with built-in controls and a JavaScript API — no plugins needed.
html
Your browser does not support video.
controls — without it, no UI appears (you'd control via JS).<source> — the browser uses the first format it supports (WebM/MP4 for cross-browser).poster — placeholder image before play.preload — none / metadata / auto; use metadata to avoid downloading large files until needed.autoplay muted loop — for background videos (most browsers require muted to allow autoplay).<track> — captions/subtitles for accessibility (a .vtt file).const v = document.querySelector("video");
v.play(); // returns a promise (may reject if autoplay blocked)
v.pause();
v.currentTime = 30; // seek to 30 seconds
v.volume = 0.5;
v.addEventListener("ended", () => console.log("finished"));
<audio> works identically, just without the visual frame/poster.
Native media elements give you cross-browser playback, accessibility (captions via <track>), and a full JS API for custom players.
Knowing the format-fallback pattern, the muted-for-autoplay rule, and preload for performance covers the practical essentials of embedding media.