Video in HTML

A video element with controls, a poster frame and captions.

<video controls width="640" poster="/img/preview.jpg"
       preload="metadata">
  <source src="/media/demo.webm" type="video/webm">
  <source src="/media/demo.mp4" type="video/mp4">
  <track src="/media/demo.en.vtt" kind="captions" srclang="en"
         label="English" default>
  <p>Your browser cannot play this video.</p>
</video>

How it works

1. Several source children let the browser pick a codec.
2. track adds subtitles or captions from a WebVTT file.
3. Text inside the element is the fallback for old browsers.

The run, in numbers

Lines

8

Characters to type

310

Tokens

59

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 47 seconds.

Type this snippet

Step 1 of 9 in Media & embeds, step 8 of 23 in Semantics & metadata.

← Previous Next →