A video that everyone can follow – HTML Practice

Add a video with captions.

What to build

A video with a fallback format and English captions.

Requirements

A video with controls, width="640", height="360" and poster="cover.jpg".
A first source: class.webm with type="video/webm".
A second source: class.mp4 with type="video/mp4".
A track with kind="captions", src="class.en.vtt", srclang="en" and label="English".

Constraints

The autoplay attribute must not be used.

Example

The syntax part of the lesson shows the same shape.

Why it works

The browser tries the sources in order, and the captions appear in the player's menu for anyone who needs them.

Hints

Hint 1

track goes inside video, after the source elements.

Hint 2

Width and height reserve the space before the video loads.

Solution

Show one correct solution (try it yourself first)

<video controls width="640" height="360" poster="cover.jpg">
  <source src="class.webm" type="video/webm">
  <source src="class.mp4" type="video/mp4">
  <track kind="captions" src="class.en.vtt" srclang="en" label="English">
</video>

Lesson: Audio, video and embedded pages →