What does the <video> element do? How do you specify a video source in HTML?
The <video> element is used to embed video directly into a web page: without third-party players like YouTube or Flash.
It allows you to play, stop, seek, and control video using the browser's own tools.
1. Simplest example
<video src="video.mp4" controls></video>What it does:
src="video.mp4": the path to the video file;controls: shows standard controls (play, pause, volume, progress bar).
Result: the browser embeds a video player that can be started right on the page.
2. The recommended (flexible) approach with <source>
To support different video formats (MP4, WebM, Ogg), nested <source> tags are used: the browser picks the right one on its own:
<video controls width="640" height="360" poster="preview.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<p>Your browser does not support video.</p>
</video>What's here:
<source>: the file's path and type (typehelps the browser determine the format);poster: a preview image shown before playback starts;- inside it, you can specify fallback text for when the browser does not support
<video>.
3. Main attributes of <video>
| Attribute | Purpose | Example |
|---|---|---|
src | Path to the video file (if <source> is not used) | src="clip.mp4" |
controls | Shows the control panel | controls |
autoplay | Starts the video automatically when the page loads (often blocked by the browser) | autoplay |
muted | Mutes the sound by default (needed for autoplay) | muted |
loop | Loops the video | loop |
poster | Placeholder image shown before playback starts | poster="preview.jpg" |
preload | Controls preloading (none, metadata, auto) | preload="metadata" |
width / height | The video player's dimensions | width="640" |
4. preload behavior
| Value | What it does |
|---|---|
none | The video does not load until the user clicks play |
metadata | Only information (duration, cover) is loaded |
auto | The video may load in advance (if the browser decides it is needed) |
5. Example with full control
<video width="600" controls autoplay muted loop poster="thumb.jpg">
<source src="intro.mp4" type="video/mp4">
<source src="intro.webm" type="video/webm">
Your browser does not support video.
</video>Behavior:
- starts automatically;
- without sound (so the browser does not block autoplay);
- loops continuously;
- shows the
thumb.jpgpicture before starting.
6. Supported formats
| Format | MIME type | Support |
|---|---|---|
.mp4 | video/mp4 | All browsers |
.webm | video/webm | Modern browsers |
.ogv | video/ogg | Firefox, Opera |
Tip: for cross-browser support, specify several <source> tags.
Summary:
| Property | Value |
|---|---|
| Tag | <video> |
| Purpose | Play video right on the page |
| Source | Via src or nested <source> tags |
| Main attributes | controls, autoplay, muted, loop, poster |
| Advantages | Built-in player, no third-party libraries, support for multiple formats |
In simple terms:
<video> is a built-in HTML video player.
The source is specified via src or <source>,
so the browser knows which file to play and in what format.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.