Audio, Video & Media APIs
15 min read
videoaudiotrackcaptionssubtitlesMedia APIposter
HTML Media Elements
The <video> and <audio> elements provide native media playback with a rich JavaScript API for custom controls.
Video Best Practices
- Always include a
posterattribute (preview image before play) - Provide multiple formats via
<source>for compatibility - Add captions via
<track>for accessibility - Use
preload="metadata"to load duration without downloading the whole file
The <track> Element
| Kind | Purpose |
|---|---|
| subtitles | Translation for viewers who do not speak the language |
| captions | For deaf/hard-of-hearing: includes sound effects, speaker identification |
| descriptions | For blind users: describes visual content |
| chapters | Navigation within the media |
Autoplay Policy
Browsers block autoplay with sound. Autoplay works only if the video is muted or the user has previously interacted with the page. This is a user-experience protection, not a bug.