HTML 54 min

HTML Media

Embed audio and video with appropriate fallbacks.

audio and video embed time-based media with native browser controls. Multiple source elements can offer different formats, track adds captions or descriptions, and fallback content gives people another route when playback is unsupported or inappropriate.

Provide sources and fallback content

The browser checks source elements in order and plays the first supported format. Include the MIME type so it can decide without downloading every file. Text inside audio or video appears when the element is unsupported.

<video controls width="960" poster="html-lesson-poster.jpg" preload="metadata">
  <source src="html-lesson.webm" type="video/webm">
  <source src="html-lesson.mp4" type="video/mp4">
  <track kind="captions" src="html-lesson-en.vtt" srclang="en" label="English" default>
  <p><a href="html-lesson.mp4">Download the HTML lesson video</a>.</p>
</video>

Expose native controls.
Offer well-supported formats.
Add captions for spoken content and meaningful sounds.
Use preload=metadata when full preloading is unnecessary.
Provide a transcript or equivalent when it improves access.

Diagram connecting text, links, images, lists, media, and structured data inside a web document — HTML content types work together: each element should express the role its content plays.

Design captions and transcripts as content

Captions identify speech, important sound effects, and speaker changes. A transcript can make long media searchable and easier to review. Audio descriptions communicate important visual information that dialogue does not cover.

<figure> <video controls preload="metadata" width="640"> <source src="media/workshop.webm" type="video/webm"> <source src="media/workshop.mp4" type="video/mp4"> <track kind="captions" src="media/workshop-en.vtt" srclang="en" label="English" default> </video> <figcaption>Creating an HTML document.</figcaption> </figure> <p><a href="media/workshop.mp4">Download the practice video</a></p> <section><h2>Transcript</h2><p>[00:00] Create a file named index.html.</p></section>

HTML Getting Started

HTML Core

Links, Media & Data

Page Structure

Quality & Reference

HTML Media

Provide sources and fallback content

Design captions and transcripts as content

Mistakes to avoid

Guided practice

Lesson recap

Understand it. Build it. Explain it.

What you should be able to do

A player needs usable resources, not just tags

Different alternatives serve different needs

Plan an accessible media package

Code

Result

Why this example works

A video that starts without usable controls

Package a thirty-second demonstration

Your build plan

Review your result

Can you explain the decision?

Configure a tutorial video

Code

Result

Pair audio with a transcript

Code

Result

Test what you learned

Test what you learned

Test what you learned

Check your understanding