Multimedia: video & audio
This course covers the native HTML video and audio elements and why they replaced plugins such as Flash. It walks through the parts of a video player: src, controls, poster, width and height, and multiple source elements for format fallback. It covers audio and the preload attribute, the browser policies that block autoplay with sound, and captions and subtitles with the track element and WebVTT files. It closes with fallback content, the type attribute, and a product page that combines a decorative background loop with a captioned demo video.
What you'll learn
- ✓How native video and audio elements differ from plugin-based players
- ✓Using src, controls, poster, width, height and preload on media elements
- ✓Ordering multiple source elements so the browser picks a supported format
- ✓Which attribute combination lets autoplay work and when to avoid it
- ✓Writing captions and subtitles with track and WebVTT files
- ✓Fallback content, the type attribute and canPlayType
Why native video/audio beat a plugin
Before HTML5, playing video in a browser meant embedding a plugin (almost always Adobe Flash) as an opaque rectangle the browser handed control to entirely. The DOM, the accessibility tree, keyboard navigation and CSS all stopped at that rectangle's edge. Whatever happened inside was invisible to…
Read the full lesson free →Curriculum
7 lessonsWhy native video/audio beat a plugin
Compares opaque Flash plugins with native video and audio elements that join the DOM and accessibility tree.
video: the anatomy of a video player
Explains src, controls, poster, width and height, plus multiple source children for WebM and MP4 fallback.
audio: the same idea, without the picture
Covers the audio element, preload values, Opus and MP3 ordering, and the need for a transcript.
Autoplay, muted, and why browsers actively fight you
Shows why browsers block autoplay with sound and limits autoplay muted playsinline loop to decorative video.
Captions and subtitles with track
Separates captions from subtitles, adds track elements with WebVTT files, and notes the WCAG caption requirement.
Fallback content and format support
Explains content between media tags, the type attribute on source, format order and the canPlayType method.
Putting it all together: a real product demo video
Builds a product page with a decorative background loop and a captioned demo video, plus a media checklist.