HTML
Project final - Video player
Combine all video techniques and document the accessible player.
Combine with figure and figcaption
In the final lesson we bring all the pieces together: the video, two sources, two caption tracks, poster and preload. We wrap everything in a <figure> and add a <figcaption> below it to show the video's title and duration.
We'll also add an HTML comment as an accessibility note. The comment is invisible in the browser but helps developers reading the source.
This is the last step of the project.
Add a note with an HTML comment
An HTML comment uses the <!-- ... --> syntax and is invisible in the browser. Short notes left in the source explain to other developers (or future you) why a section exists.
As an accessibility note we'll write that the video includes captions and a poster. Keep the comment short and meaningful; avoid long explanations unless needed.
Exercise Wrap the video in figure, add figcaption and a comment
Take the video from the previous lesson. Inside <body>, above the video tag, add an HTML comment: <!-- Accessible player: captions and poster included -->. Then wrap the video in a <figure>. Below the video tag, add <figcaption>Nature Doc: Black Sea — 12 minutes, captioned.</figcaption>. Close the figure tag.
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nature Doc: Black Sea</title>
</head>
<body>
<!-- Accessible player: captions and poster included -->
<figure>
<video controls poster="/covers/black-sea.jpg" preload="metadata">
<source src="/videos/black-sea.mp4" type="video/mp4">
<source src="/videos/black-sea.webm" type="video/webm">
<track kind="captions" src="/captions/black-sea-en.vtt" srclang="en" label="English">
<track kind="captions" src="/captions/black-sea-tr.vtt" srclang="tr" label="Turkish">
</video>
<figcaption>Nature Doc: Black Sea — 12 minutes, captioned.</figcaption>
</figure>
</body>
</html>
Project complete
Congratulations! You've built an accessible video player page. You learned:
<video> and controls for playback<source> and type for multiple formats<track> and kind for captionsposter and preload for preview<figure> and <figcaption> for description
You can reuse this pattern in your real projects. Accessibility built in early is always easier than added later.
Test yourself
-
What does <figcaption> define inside <figure>?
- The video's source file
- The video's descriptive title
- The video's duration
- The video's playback speed
Show answer
The video's descriptive title — Correct! <figcaption> defines the video's descriptive title or caption.
-
Complete the figcaption text
<figcaption>Nature Doc: Black Sea — 12 minutes, ____.</figcaption>
Show answer
<figcaption>Nature Doc: Black Sea — 12 minutes, captioned.</figcaption>
-
Match the element to its purpose (review).
- video
- video playback
- source
- format option
- track
- captions or chapters
- figure
- content group
- figcaption
- caption text
Next lesson: Form autocomplete
