Suggest an edit

Improve this article

Refine the answer for “What does the <video> element do? How do you specify a video source in HTML?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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

```html
<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:

```html
<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 (`type` helps 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

```html
<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.jpg` picture 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**.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts532 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.