The <video> Element
As defined in the HTML Living Standard, the <video> element is used to embed video content in documents, such as movie clips or other video streams. It supports multiple sources for format compatibility and provides a native interface for media playback.
<video controls width="640" poster="thumb.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
<track kind="captions" src="caps_en.vtt" srclang="en" label="English">
Your browser does not support the video tag.
</video>
View HTML Living Standard: The video element
Accessibility: Captions and Descriptions
Providing a video file is only the first step. To ensure compliance with accessibility standards, you must account for users with hearing or visual impairments.
WCAG Requirement: Captions (Prerecorded)
Success Criterion 1.2.2 (Level A): Captions are provided for all prerecorded audio content in synchronized media.
Use the <track> element with kind="captions" to provide a WebVTT file containing dialogue and important sound effects. This allows the user to toggle text overlays using native browser controls.
WCAG Requirement: Audio Description
Success Criterion 1.2.5 (Level AA): Audio description is provided for all prerecorded video content in synchronized media.
For users who are blind or low vision, important visual actions should be described. This can be done via a second audio track or a text track with kind="descriptions" that a screen reader can announce.
Controls and Interaction
The controls attribute is vital for usability and accessibility.
- User Agency: Users must be able to play, pause, seek, and adjust volume. Never hide the controls unless you are building a custom, fully accessible controller.
- Avoid Autoplay: Auto-playing video with sound is a major accessibility failure. It can disorient users and drown out screen readers, violating WCAG SC 1.4.2 (Audio Control).
- Poster Image: Use the
posterattribute to provide a high-contrast thumbnail. This improves performance and provides context before the video starts.
<!-- Example of a silent, decorative background video -->
<video autoplay muted loop playsinline aria-hidden="true">
<source src="bg-waves.mp4" type="video/mp4">
</video>
Fallback Content
Content placed between the <video> tags is only rendered if the browser does not support the element.
A11y Tip: Transcripts
While captions help during playback, a full text transcript provided near the video is a massive benefit for all users. It helps with searchability, allows users to scan content, and is essential for those who use braille displays.