Purpose and content model
Audio and video embed timed media. Their content can supply alternative source resources, text tracks, and fallback text. A native player offers a useful baseline before you consider custom controls. Source lets the browser choose an available resource format; track supplies timed text such as captions, subtitles, descriptions, or chapters.
When source children are used, avoid conflicting src configurations on the parent. A codec and container combination must be supported, not merely a familiar filename extension. Fallback text inside audio or video primarily addresses lack of element support and is not a reliable general error message for every failed media request.
Syntax and working example
<video controls width="640" height="360" poster="/images/workshop.jpg">
<source src="/media/workshop.mp4" type="video/mp4">
<track kind="captions" src="/media/workshop-en.vtt" srclang="en" label="English" default>
<p><a href="/media/workshop.mp4">Download the workshop video</a>.</p>
</video>Supported attributes and behavior
Audio/video share controls, src, preload, autoplay, loop, muted, and crossorigin; newer loading behavior should be verified against target support. Video additionally supports width, height, poster, and playsinline. Source uses src and type for media candidates. Track uses src, kind, srclang, label, and default; subtitle tracks require a language. WebVTT is the usual track-file format. Boolean attributes are enabled by presence.
Another practical pattern
<audio controls preload="metadata">
<source src="/media/interview.mp3" type="audio/mpeg">
</audio>
<p><a href="/interview-transcript/">Read the interview transcript</a>.</p>Accessibility and browser notes
Provide accurate captions for spoken video, a transcript where appropriate, and descriptions of essential visual information. Avoid unexpected autoplay, particularly with sound. Browser autoplay policies may block playback despite the attribute, and a play() promise can reject. Native controls still need testing for the intended audience and device.
Common mistakes
Do not label ordinary translated subtitles as captions if they omit meaningful sounds. Preload is a hint, not a guaranteed download policy. A poster is not an alternative to describing essential video information. Check CORS requirements for cross-origin text tracks.
Verify your implementation
Test play, pause, volume, captions, keyboard operation, and an unavailable source. Read the transcript without watching the video and ask whether the lesson still makes sense. Inspect actual media requests in a normal browser project because the learning sandbox blocks network media.
Standard status and sources
Standard; browser availability must be checked independently of specification status.