HTML Video
Write a minimal WebVTT caption cue lasting from zero to two seconds.
Understand the topic
The video element embeds a playable video with native controls. source provides a resource and its media type, while track can add WebVTT captions. Width and responsive CSS help the video fit the page. Use a poster image if useful, avoid unexpected autoplay, and remember that caption files must exist and match the spoken content.
Worked example
<video controls preload="metadata" width="640" poster="class-poster.jpg">
<source src="class-tour.mp4" type="video/mp4">
<track kind="captions" src="class-tour.en.vtt" srclang="en" label="English" default>
<p><a href="class-tour.mp4">Download the class tour</a></p>
</video>
<p><a href="class-tour-transcript.html">Read the transcript</a></p>Place your own poster, MP4, captions, and transcript at the specified paths. This lesson displays the source instead of embedding missing media files.
Practice
Write a minimal WebVTT caption cue lasting from zero to two seconds.
Show a suggested answer
WEBVTT
00:00.000 --> 00:02.000
Welcome to the class tour.Common mistake
Muted autoplay may be permitted in some circumstances, but autoplay with sound is often blocked. Do not make playback dependent on autoplay.