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