# Video and Audio

The video and audio elements put the browser's own player on your page, with play, pause, volume and full screen built in, for any video or sound file you give them.

Apprentice · HTML · Updated October 31, 2026

## After this lesson you can

- Add a video or audio player with controls, source files and a fallback
- Choose a video's poster, preload, width and height
- Make a silent background video play on its own with autoplay, muted, loop and playsinline

## Key takeaways

- `<video>` and `<audio>` put the browser's own player on your page. The controls attribute makes its buttons appear.
- List several `<source>` elements, each with a type, and the browser plays the first file it can.
- On a video, poster shows a picture until it plays, and width and height save its space so the page doesn't jump.
- Browsers block autoplay with sound. A silent background clip needs autoplay, muted, loop and playsinline together.
- The browser's player already works with the keyboard and screen readers, so you get that without writing any code.

A band wants a 30-second preview of its new song on its page. A recipe site wants the clip that shows how to fold a dumpling. A bike shop wants a looping video of a wheel being trued behind its headline. And you might want your own podcast online. Every one of these is a few lines of HTML: the browser already has a video and audio player built in, and two elements put it on your page.

This lesson follows The Bike Shed, a made-up podcast about fixing your own bike. Episode 12 is *Fixing a Flat in Ten Minutes*, and its page needs the audio episode and a short video of the repair.

## A player that comes with the browser

When you buy a TV, the remote comes in the box: you don't build your own buttons to watch a show. Browsers are the same. The **`<video>`** element puts a video on the page, and the **`controls`** attribute turns on the browser's own buttons: play, pause, a time slider, volume and full screen. These are called the **media controls**.

```html
<video src="media/flat-fix.mp4" controls></video>
```

- **`src`** is the video file's address, the same as on an `<img>`.
- **`controls`** is a **boolean attribute**: it is on when it's there, and off when it isn't. It has no value, so you write the word on its own.
- Leave `controls` out and the video shows its first frame with no buttons, and the visitor has no way to start it.

![The browser's video player for the bike repair clip, with its play button, time slider, volume, captions and full-screen buttons in a bar along the bottom](https://www.ask-codey.com/lessons/TODO)

## Audio works the same way

The **`<audio>`** element is the same idea for sound: a podcast, a song preview, a pronunciation. It has the same `src` and `controls`.

```html
<audio src="media/bike-shed-ep12.mp3" controls></audio>
```

There is one big difference: audio has nothing to look at. Without `controls`, an `<audio>` element is invisible, and the visitor can't see it or play it.

**Try it.** Make a folder named `media-practice`, with an `index.html` page inside and a short MP3 and MP4 beside it. Free clips you may use are on sites such as Pexels (pexels.com/videos), or use the Bike Shed files from this chapter's exercise. Add a `<video>` and an `<audio>`, each with `controls`, and open the page with Live Server. Then remove `controls` from the audio and watch the player disappear.

## Several files, and a fallback

At a café you might ask for an oat-milk latte, *or, if you're out of oat milk, a regular one*. A video can ask the same way. Instead of one `src`, list several **`<source>`** elements inside the `<video>`. The browser goes down the list and plays the first file it can.

```html
<video controls>
    <source src="media/flat-fix.webm" type="video/webm">
    <source src="media/flat-fix.mp4" type="video/mp4">
    <p>Your browser can't play this video. <a href="media/flat-fix.mp4">Download the repair video (MP4)</a>.</p>
</video>
```

- **`type`** is the file's **media type**: its kind, then a slash, then its format. `video/mp4` is read "video slash M P 4". With it, the browser can skip a file it can't play without downloading it.
- `<source>` has no closing tag, like `<img>`.
- Anything else inside the `<video>`, here the paragraph, is the **fallback**: what a browser that doesn't know `<video>` shows instead. Every current browser knows it, so the fallback rarely shows, but a download link there costs nothing.

| File | Its type | Plays in |
|---|---|---|
| MP4 video | `video/mp4` | Every current browser |
| WebM video | `video/webm` | Chrome, Edge, Firefox and recent Safari; often a smaller file than MP4 |
| MP3 audio | `audio/mpeg` | Every current browser |

MP4 is the safe choice when you have one file. When you have two, put the smaller format first and MP4 last, so every browser finds one it can play.

## Poster, size and preload

Outside a movie theater, the poster tells you what's showing before you go in. The **`poster`** attribute is the video's poster: a picture the player shows until someone presses play. Without one, the player shows the video's first frame, which is often black.

```html
<video controls width="640" height="360" poster="media/flat-fix-poster.jpg" preload="metadata">
    <source src="media/flat-fix.mp4" type="video/mp4">
</video>
```

- **`width`** and **`height`** are in pixels, and save the video's space on the page before it loads, so the text below doesn't jump down. A stylesheet can still make it shrink to fit a phone (`video { max-width: 100%; height: auto; }`), and the browser keeps the same shape.
- **`preload`** tells the browser how much to download before anyone presses play:
  - `none`: nothing, which saves data on a page with many videos;
  - `metadata`: only the length and the size, which is a good default;
  - `auto`: the browser may download the whole file.

  It's a hint: the browser can do less, for example on a slow phone connection.

**Try it.** Give your video a `poster`, using any picture, and reload the page. Then try `preload="none"` and watch the time on the player: it shows the length only after you press play.

## A silent background clip

Picture a bike shop window with a wheel spinning on a loop. It's fine because it's silent: nobody wants a shop to blast music at them as they walk past. Browsers think the same way. They **block autoplay with sound**: a video with the **`autoplay`** attribute and its sound on waits until the visitor clicks. A **`muted`** video may start on its own.

```html
<video autoplay muted loop playsinline controls width="640" height="360" poster="media/wheel-poster.jpg">
    <source src="media/wheel-spinning.mp4" type="video/mp4">
</video>
```

- **`autoplay`** asks to start as soon as it can.
- **`muted`** starts with the sound off, which is what lets autoplay work.
- **`loop`** starts again from the beginning when it ends.
- **`playsinline`** plays it inside the page on an iPhone, instead of jumping to full screen.

All four are boolean attributes, and their order doesn't matter. Keep `controls` too: accessibility rules ask that anything moving for more than five seconds can be paused, and some people find movement on a page distracting or even dizzying.

## It already works with the keyboard

The browser's player is built to be used by everyone. Press **Tab** and the focus moves onto its buttons; **Space** or **Enter** presses the one in focus, and in most browsers the arrow keys move the time and volume sliders. A screen reader, the program that reads a page aloud for blind visitors, announces each one ("Play, button"). A homemade player built from pictures and scripts often loses all of this, so the built-in one is a good place to start.

**Try it.** Click in the page's address bar, then press **Tab** until the focus reaches your video. Play it, pause it and change the volume without touching the mouse.

## Check yourself

2 questions to try on the lesson page.

## So what

Video and sound used to need a plug-in. Now two elements, `<video>` and `<audio>`, give every visitor a player that works on a phone, with a keyboard and with a screen reader. Next, you'll make sure people who can't hear it can still follow along.

## Key terms

- [&lt;video>](https://www.ask-codey.com/glossary/video)
- [&lt;audio>](https://www.ask-codey.com/glossary/audio)
- [&lt;source>](https://www.ask-codey.com/glossary/source)
- [Video poster](https://www.ask-codey.com/glossary/video-poster)
- [autoplay](https://www.ask-codey.com/glossary/autoplay)
- [muted](https://www.ask-codey.com/glossary/muted)

## Cheat sheets

- [Video and Audio](https://www.ask-codey.com/cheat-sheets/html-media-video-and-audio-cheat-sheet)

## Related

- [Captions and Subtitles](https://www.ask-codey.com/lessons/html-media-captions-and-subtitles)

Source: https://www.ask-codey.com/lessons/html-media-video-and-audio