Multimedia

Course 2 · Ch 3

Multimedia in Depth

Video/audio attributes beyond the basics, captions and subtitles, and the picture element for genuinely responsive images

Fundamentals Chapter 5 covered basic image and media embedding. This chapter goes further into making media genuinely accessible (captions, subtitles) and genuinely responsive — serving different image files for different screen sizes or pixel densities, not just resizing one image with CSS.

The track Element — Captions and Subtitles

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="subtitles-hu.vtt" srclang="hu" label="Hungarian">
</video>

kind value	Purpose
subtitles	Translated dialogue, for viewers who don't understand the spoken language
captions	Dialogue AND significant sound effects, for deaf/hard-of-hearing viewers — same language as the audio
descriptions	Text describing visual content, for blind/visually-impaired viewers
chapters	Navigation points within the video, for chapter-jump UI

The actual subtitle/caption text lives in a separate .vtt (WebVTT) file — a simple timestamped text format, not embedded directly in the HTML itself.

Subtitles and captions are NOT the same thing, despite often being used interchangeably casually

Subtitles assume the viewer can hear the audio but not understand the language — they translate dialogue only. Captions assume the viewer cannot hear the audio at all — they include both dialogue AND meaningful sound effects ("[door slams]," "[tense music playing]"). Choosing the right kind value, and writing the actual content with the right audience in mind, genuinely matters for accessibility.

The picture Element — Responsive Images

A single <img> always loads the same file, regardless of screen size — wasteful on a small mobile screen if the only available image is a large desktop-resolution photo. <picture> lets the browser choose between several source files based on screen width or pixel density.

Only the chosen image actually downloads — not all three, saving real bandwidth

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="A description of the image">
</picture>

Critically, the <img> tag is still required inside <picture> — it's the fallback for any browser that doesn't support <picture> at all, and it's also where alt text (Fundamentals Chapter 5) belongs, regardless of which <source> ends up actually used.

srcset on a Plain img — Pixel Density Variants

A simpler, related technique: offering multiple resolutions of the same image for different screen pixel densities (a high-DPI "retina" display vs a standard one), without needing the full <picture> structure.

<img src="photo.jpg"
     srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"
     alt="...">

picture is for art direction; srcset alone is for resolution switching

Use <picture> when genuinely different images (a cropped close-up on mobile vs a wide shot on desktop) are needed for different contexts. Use plain <img srcset> when it's the same image, just at different resolutions for different screen pixel densities — a meaningfully different problem each technique is purpose-built to solve.

preload — Hinting How Eagerly to Load Media

<video controls preload="metadata"> // loads just duration/dimensions, not the full video
<video controls preload="none"> // loads nothing until the user presses play

Chapter 3 Quick Reference

<track kind="subtitles/captions/descriptions/chapters"> — references a separate .vtt timestamped text file
Subtitles ≠ captions — subtitles translate dialogue only; captions include meaningful sound effects too
<picture> — browser picks ONE source based on matching media conditions; always include a fallback <img> with alt
picture = art direction (different images); srcset alone = resolution switching (same image, different pixel densities)
preload="metadata"/"none" — controls how eagerly media loads before playback starts
Next chapter: iframes & embeds