HTML Video
The <video> element plays a video file directly in the page, with no plugin.
The video Element
Example
<video src="intro.mp4" width="640" height="360" controls></video>The controls attribute adds the play button, volume, time bar and full-screen button. Without it, the video shows but the user cannot start it.
Several Sources
Not every browser plays every format. You can list more than one file with <source> tags. The browser plays the first one it understands. Text inside the element is shown only by very old browsers that do not know <video>.
Example
<!DOCTYPE html>
<html>
<body>
<h2>Welcome to the Course</h2>
<video width="480" height="270" controls poster="cover.jpg">
<source src="welcome.webm" type="video/webm">
<source src="welcome.mp4" type="video/mp4">
Sorry, your browser cannot play this video.
</video>
<p>Put your own welcome.mp4 next to this page to see it play.</p>
</body>
</html>The type attribute tells the browser the format before it downloads the file, so it can skip the ones it cannot play.
Video Formats
| Format | MIME type | Notes |
|---|---|---|
| MP4 (H.264) | video/mp4 | Plays in every modern browser. The safe choice |
| WebM | video/webm | Open format, often smaller files |
| Ogg | video/ogg | Older open format, rarely needed now |
A single MP4 file is enough for almost all visitors today. Add WebM only if you want smaller downloads.
Video Attributes
| Attribute | What it does |
|---|---|
controls | Shows the player buttons |
autoplay | Starts playing as soon as it can |
muted | Starts with the sound off |
loop | Starts again when it ends |
poster | An image shown before the video plays |
preload | none, metadata or auto: how much to download early |
playsinline | On iPhones, plays inside the page instead of full screen |
width, height | The size of the player |
Autoplay Rules
Browsers block videos that play sound on their own, because it annoys people. Autoplay only works when the video is also muted. A silent background video on a shop's home page looks like this:
Example
<video autoplay muted loop playsinline poster="shop-cover.jpg">
<source src="shop-tour.mp4" type="video/mp4">
</video>Do not autoplay long videos. They use the visitor's mobile data. Many people in Pakistan browse on limited data packages.
Captions with track
The <track> element adds captions or subtitles from a WebVTT file (.vtt). Captions help deaf users, people watching without sound, and people who read English better than they hear it.
Example
<video controls width="480">
<source src="lesson1.mp4" type="video/mp4">
<track src="lesson1-en.vtt" kind="captions" srclang="en" label="English" default>
<track src="lesson1-ur.vtt" kind="subtitles" srclang="ur" label="Urdu">
</video>A .vtt file is plain text with times and lines:
Example
WEBVTT
00:00:01.000 --> 00:00:04.000
Welcome to the HTML course.
00:00:04.500 --> 00:00:08.000
In this lesson we build our first page.Controlling Video with JavaScript
The video element has methods like play() and pause(), so you can make your own buttons.
Example
<!DOCTYPE html>
<html>
<body>
<video id="clip" width="320" height="180" src="clip.mp4"></video><br>
<button onclick="document.getElementById('clip').play()">Play</button>
<button onclick="document.getElementById('clip').pause()">Pause</button>
<button onclick="speed()">Double speed</button>
<p id="info">Speed: 1x</p>
<script>
function speed() {
const v = document.getElementById("clip");
v.playbackRate = 2;
document.getElementById("info").innerHTML = "Speed: 2x";
}
</script>
</body>
</html>Video File or YouTube?
| Your own video file | YouTube iframe |
|---|---|
| You need hosting space and bandwidth | YouTube hosts it for free |
| Full control of the look | YouTube branding and suggestions |
| Good for short clips and backgrounds | Good for long lessons |
See the Iframes chapter to embed a YouTube video.
Exercise
Exercise
A muted background video should start by itself. Which attributes are needed?