Before this lesson

Understand paths and images, and be able to inspect resource requests.

What you will be able to do

Configure controllable media, understand captions and file formats, and preserve essential information when a feature is unavailable.

Understand the mechanism

A video extension identifies a container, not a guarantee that every browser supports its encoded tracks. Multiple source elements provide format alternatives. controls exposes native playback controls, and preload is a hint rather than a download command. Important tutorial steps must not be available only through audio.

A captions track commonly points to WebVTT text containing timestamps and cues. Speech text alone may omit meaningful sounds. An iframe embeds a separate document, adding performance and permission considerations. Use embedding deliberately, label it with a descriptive title and grant only the capabilities the embedded content needs.

Runnable example

<video controls preload="metadata" width="640" height="360">
  <source src="media/intro.mp4" type="video/mp4">
  <track src="media/intro-en.vtt" kind="captions" srclang="en" label="English" default>
  <p>Your browser cannot play this video. <a href="transcript.html">Read the transcript</a>.</p>
</video>
<p><a href="transcript.html">Read the full transcript</a></p>

Trace and verify

Supply your own media, captions and transcript; these paths are not hosted downloads. Serve the files over HTTP and inspect media and track requests. Test with audio muted. If a resource fails, the transcript link placed outside the video remains visible independently of fallback behavior.

Common mistakes and boundaries

Do not depend on autoplay succeeding; browsers can restrict it based on sound and user settings. Avoid putting credentials in embedded URLs. Granting every permission to an unfamiliar frame expands capability rather than solving compatibility. Prioritize access, control and fallback instead of automatic playback.

Practice challenge

Write two caption cues for a ten-second demonstration and explain why a transcript link should remain outside the player.

Reference solution and reasoning

WebVTT uses start and end times for each cue. An external transcript supports reading, searching and media failure; captions serve a different viewing need. Align cues with the actual demonstration rather than displaying everything in the first second.

WEBVTT

00:00.000 --> 00:04.000
Open the HTML file.

00:04.000 --> 00:10.000
Save the change and refresh the browser.

Further reading