Module 12: Audio, Video, and Embedded Content
The video Element and Captions
Embed video with controls, multiple sources, captions, and a poster image.
The video element embeds video content. A useful player usually includes controls, intrinsic dimensions, and captions when speech or meaningful audio is present.
<video controls width="960" height="540" poster="images/demo-poster.jpg">
<source src="video/html-demo.webm" type="video/webm">
<source src="video/html-demo.mp4" type="video/mp4">
<track src="captions/en.vtt" kind="captions" srclang="en" label="English" default>
Your browser does not support embedded video.
</video>
The poster image appears before playback. The track element can provide captions, subtitles, descriptions, or chapters using WebVTT files. Captions include important non-speech audio information, such as [door closes], when it helps the viewer understand the scene.
A video with spoken instruction should have accurate captions. A transcript is useful for search, reading, and people who prefer text. If important visual information is not described in the audio, add audio description or an equivalent explanation.
Do not autoplay videos with sound. Give visitors control over playback and respect reduced-motion preferences in the overall design.