Project: Accessible video player

HTML course · Advanced · Lesson 13/56

Overview of the 5-lesson project: a video page with subtitles.

Project: Accessible video player

In this 5-lesson project you'll build an accessible video player page. Each lesson adds one piece, and by the end you'll have a complete player.

You'll use:

<video> to play the video
<source> for multiple formats
<track> for captions
poster for a cover image
<figure> and <figcaption> for a description

The video title will be Nature Doc: Black Sea.

Video and accessibility

To make a video page usable for everyone, three things are essential:

Captions: deaf and hard-of-hearing viewers read the dialogue.
Descriptions: blind viewers listen to a spoken scene description.
Controls: keyboard and screen-reader users can operate playback.

HTML's <video> and <track> elements meet these needs natively. We'll implement all three in this project.

Exercise Write the empty document skeleton

Start the project by writing an empty HTML document skeleton. Include DOCTYPE, <html> (with lang="en"), <head> (meta charset utf-8, viewport, title) and an empty <body>. The title content should be Nature Doc: Black Sea.

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>
  </body>
</html>

Test yourself

Which HTML element holds the video file in this project?
- audio
- video
- picture
- embed
Show answer

video — Correct! The <video> element embeds a video on the page.

Set the page character encoding

<meta charset="____">

Show answer

<meta charset="utf-8">

Match project parts to HTML elements.

video player

<video>
captions

<track>
video description

<figcaption>
page title

<title>

All lessons in Advanced

Project: Accessible video player