**`<video>`** plays video directly in the browser, with the **`controls`** attribute enabling the native play/pause/seek/volume UI (omit it and the video has no visible controls at all unless you build your own with JavaScript). Since browsers support different codecs, listing multiple `<source>` children lets the browser pick the first format it can actually play. Other key attributes: **`autoplay`** (starts playing automatically — most browsers require it to be paired with `muted` to work at all), **`loop`** (repeats when finished), **`muted`**, and **`poster`** (a placeholder image shown before playback starts).
1Understanding <video>
`<video>` plays video directly in the browser, with the `controls` attribute enabling the native play/pause/seek/volume UI (omit it and the video has no visible controls at all unless you build your own with JavaScript). Since browsers support different codecs, listing multiple <source> children lets the browser pick the first format it can actually play. Other key attributes: `autoplay` (starts playing automatically — most browsers require it to be paired with muted to work at all), `loop` (repeats when finished), `muted`, and `poster` (a placeholder image shown before playback starts).
Nearly all modern browsers block autoplay with sound as a user-hostile pattern — if you need autoplay, you must also add muted, or the browser will simply ignore the autoplay request.
<video controls poster="/thumbnail.jpg" width="800">
<source src="/intro.mp4" type="video/mp4">
Your browser doesn't support the video tag.
</video>2Practical Example
Here is a real-world application of <video> showing how it is used in production HTML.
<!-- Background-style video: muted autoplay loop -->
<video autoplay muted loop playsinline>
<source src="/background.mp4" type="video/mp4">
</video>3Best Practices
Follow these guidelines when working with <video>:
1. Provide multiple <source> formats (at least MP4 and WebM) for broad browser compatibility
2. Always include controls unless you're building fully custom playback UI
3. Pair autoplay with muted, since browsers block autoplay-with-sound by default
Tip: Nearly all modern browsers block autoplay with sound as a user-hostile pattern — if you need autoplay, you must also add muted, or the browser will simply ignore the autoplay request.
<video controls poster="/thumbnail.jpg" width="800">
<source src="/intro.mp4" type="video/mp4">
Your browser doesn't support the video tag.
</video>