Audio, Video and Captions
Embed native media players and make them accessible with the track element.
You don't need a third-party player for most media. The <audio> and <video> elements give you native controls, and multiple <source> children let the browser choose a format it supports.
Useful attributes
controls— show the play/pause UI.autoplay— start immediately (most browsers requiremutedtoo).loop— restart when finished.preload— hint how eagerly to fetch (none,metadata,auto).poster— a still image shown before a video plays.
The track element: captions and more
The professional, non-negotiable part is <track>. It attaches a WebVTT file for captions, subtitles, descriptions, or chapters. Captions make your video usable by deaf viewers, by anyone in a quiet office, and by search engines that read the text.
<video controls>
<source src="clip.mp4" type="video/mp4">
<track kind="captions" src="clip.vtt" srclang="en" label="English" default>
</video>Example
When to use it
- A course platform embeds lecture recordings using <video> with controls, captions, and a poster image.
- A podcast site uses <audio controls> with multiple format sources to ensure playback in every browser.
- A video tutorial uses <track kind="captions"> to provide closed captions for deaf and hard-of-hearing learners.
More examples
Video player with poster and controls
poster shows a thumbnail before play; controls adds native UI; preload="metadata" fetches only duration.
<video
src="lesson-intro.mp4"
poster="lesson-thumb.jpg"
controls
width="720"
preload="metadata"
>
<p>Your browser does not support HTML video.
<a href="lesson-intro.mp4">Download the video</a>.
</p>
</video>Multiple format sources for video
The browser picks the first <source> it can decode; AV1 is smallest, WebM is a broad fallback.
<video controls width="720" height="405">
<source src="video.av1.mp4" type="video/mp4; codecs=av01">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<p>Download: <a href="video.mp4">MP4</a></p>
</video>Video with WebVTT captions track
<track> links a WebVTT file providing captions or subtitles; kind and srclang declare their type and language.
<video controls width="720">
<source src="lecture.mp4" type="video/mp4">
<track kind="captions"
src="captions-en.vtt"
srclang="en"
label="English"
default>
<track kind="subtitles"
src="subtitles-fr.vtt"
srclang="fr"
label="French">
</video>
Discussion