Lesson 10 of 55 · HTML
Multimedia – Audio and Video
Duration: 11 min
Embedding Media
<video controls width='640'>
<source src='movie.mp4' type='video/mp4' />
<source src='movie.webm' type='video/webm' />
<track kind='captions' src='captions.vtt' srclang='en' label='English' default />
Your browser does not support the video tag.
</video>
<audio controls>
<source src='song.ogg' type='audio/ogg' />
<source src='song.mp3' type='audio/mpeg' />
Your browser does not support the audio element.
</audio>
Attributes
controls– Adds native playback UI (play/pause, volume, timeline).autoplay,loop,muted– Additional behaviours; use sparingly to avoid unexpected media playback.preload–metadata(default),auto,none. Settingmetadataloads only duration and dimensions.<track>– Provides subtitles, captions, descriptions, chapters, or metadata for video/audio.crossorigin– Required when fetching media from a different origin and you intend to use the MediaElement API.
Accessibility
- Always supply captions for video (
kind='captions'). - Provide a textual description for audio when the content conveys essential information (e.g., a podcast).
- Use the
aria-labelor<track kind='descriptions'>for describing visual content to screen readers.
Adaptive streaming (advanced)
- Use
<source>with HLS (.m3u8) or DASH (.mpd) for adaptive bitrate streaming. - Include multiple qualities so the browser picks the best one based on network conditions.
Quick checklist for media
- Captions (
<track kind='captions'>) provided for video? ✅ preload='metadata'used for non‑critical media? ✅- Native controls present (
controlsattribute)? ✅ - Multiple source formats (
mp4,webm,ogv) offered? ✅ - Autoplay avoided unless user‑initiated? ✅
Tip: Test with the Captions preference in the OS and ensure captions appear and sync correctly.