Video skeleton

Set up the video with <video> and multiple <source> elements.

The video element and controls

HTML's <video> element embeds a video on the page. The controls attribute shows the browser's built-in playback buttons (play, pause, volume, fullscreen); it's a boolean attribute, no value needed.

Inside the video tag you place <source> elements, each pointing to a different format. The browser plays the first format it supports.

An empty <video> element alone shows nothing; you must add sources.

The source element and type

Each <source> element gives the file path with src and the MIME type with type. The browser reads the type value and picks a format it can play; it does not waste time downloading files it cannot play.

For MP4 you write type="video/mp4", for WebM type="video/webm". Multiple sources give consistent playback across browsers.

Exercise Add video and two sources

Take the skeleton from the previous lesson. Add a <video controls> element inside <body>. Inside the video, place two <source> elements: one with src="/videos/black-sea.mp4" type="video/mp4", the other with src="/videos/black-sea.webm" type="video/webm". Close the video 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>
    <video controls>
      <source src="/videos/black-sea.mp4" type="video/mp4">
      <source src="/videos/black-sea.webm" type="video/webm">
    </video>
  </body>
</html>

Test yourself

Which attribute shows the browser's playback buttons?
- autoplay
- muted
- controls
- loop
Show answer

controls — Correct! The controls attribute shows play, pause and volume buttons.

Write the MIME type for the MP4 source

<source src="/videos/black-sea.mp4" type="____">

Show answer

<source src="/videos/black-sea.mp4" type="video/mp4">

Match the file extension to its MIME type.

.mp4

video/mp4
.webm

video/webm
.ogg

video/ogg
.mov

video/quicktime

Next lesson: Track and captions

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies