Video and Audio

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.

<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.

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.

<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.

<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.

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.

<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.

<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

• <video>
• <audio>
• <source>
• Video poster
• autoplay
• muted

Cheat sheets

• Video and Audio

Related

• Captions and Subtitles