HTML Media

Understand the topic

Web media combines a container format, encoded streams, and playback support. A filename extension alone does not guarantee every browser can decode a resource. Use native audio and video controls, provide alternative sources when necessary, and plan captions, transcripts, and descriptions. Media should support the lesson without forcing visitors to download or play it automatically.

Worked example

<figure>
  <audio controls preload="none" src="/course-audio.php">
    Your browser does not support audio playback.
  </audio>
  <figcaption>Example audio source; replace the URL with your own recording.</figcaption>
</figure>

This source example intentionally names a resource you must supply. controls provides native playback UI, and preload="none" asks the browser to avoid preloading the recording.

Practice

List the accessible alternatives needed for a spoken instructional video.

Provide accurate captions, a transcript, and descriptions of important visual information that the speech does not explain.

Common mistake

Do not assume fallback text inside audio or video is a complete transcript for browsers that support the element.

HTML documentation