Stop 02 · HTML5Topics · 8/12

Video

In short

Product demos, course lessons, that looping hero background. The <video> tag handles them all, and a few attributes decide whether it feels smooth or eats your users' data.

The `<video>` element embeds video with native controls, poster images, captions (`<track>`) and a rich JavaScript API for custom players. Production video interfaces also need responsive sizing, captions, accessible controls, loading strategy, poster images, and consideration for bandwidth and mobile performance.

The jaadu mascot sits in a cinema seat with popcorn, watching a projector light up a mountain scene.

Think of it like this

The single-screen cinema

Before the film starts you see a poster outside. Then the reel plays on screen, with subtitles if you need them. <video> works the same way: a poster image first, the video file, and a subtitles track.

Watch it happen

From poster to captions

Poster

Metadata

Buffer

Play

Captions

1/5Before anything loads, the poster image fills the player so it isn't a black box.

The big ideas

What you need to know

poster is the first look

poster shows an image before playing, so users don't stare at a black box.

Silent autoplay is allowed

Browsers allow autoplay if the video is muted. Add playsinline so iPhones don't jump to fullscreen.

Captions with <track>

A .vtt file adds subtitles. Users can switch them on, and they help with search and accessibility.

Big videos go elsewhere

For long lessons, host on YouTube or a video service. They handle streaming at different qualities for slow networks.

See it in code

Walk through the code

html

1<!-- Lesson video with captions -->2<video controls width="640" poster="/img/lesson-1.jpg" preload="metadata">3  <source src="/video/lesson-1.webm" type="video/webm" />4  <source src="/video/lesson-1.mp4" type="video/mp4" />5  <track kind="captions" src="/video/lesson-1.en.vtt"6         srclang="en" label="English" default />7</video>8 9<!-- Background loop for a hero section -->10<video autoplay muted loop playsinline poster="/img/hero.jpg">11  <source src="/video/hero.mp4" type="video/mp4" />12</video>

1/4poster shows an image first. preload="metadata" loads only the length and first details.

preload="metadata" loads only the length and first frame. The hero video plays on its own because it's muted.

Save yourself the pain

Common mistakes

Oops

Using a 40 MB video as a homepage background.

Do this instead

Keep background loops short and compressed, and always set a poster for slow networks.

Oops

Adding autoplay without muted and wondering why it won't start.

Do this instead

Autoplay with sound is blocked. Add muted and playsinline for silent autoplay.

Your mission

Caption your own clip

~30 min

Quick check

Which attributes let a hero video play on its own on most phones and laptops?

Go deeper

1Embed a video with `controls`, `poster` and a `<track>` caption file. Validate your understanding by applying it in a small practical example.
2Build play/pause/seek controls using the HTMLMediaElement API. Keep the first version small, then add one improvement after the core behavior works.
3Learn lazy-loading and the `preload` attribute for performance.