Audio & Video

Modern browsers can play video and audio by themselves, with no plug-ins. Two elements do the work: <video> and <audio>. With a few attributes you get play and pause buttons, a volume slider, full-screen mode and even captions in several languages.

In this lesson you will learn to add video and audio, offer more than one file format, control loading and autoplay, and make media accessible with captions and transcripts.

Adding a video

Here is a complete, well-behaved video element for a cooking class website:

<video controls width="640" height="360" poster="images/dosa-poster.jpg" preload="metadata">
  <source src="videos/dosa-recipe.mp4" type="video/mp4">
  <p>Your browser cannot play this video. <a href="videos/dosa-recipe.mp4">Download the dosa recipe video (MP4, 18 MB)</a>.</p>
</video>

Each part has a job:

• controls shows the browser's built-in player: play, pause, a progress bar, volume, full screen. Without it, the video shows no buttons at all, and visitors cannot start it unless you write JavaScript. Almost every video needs controls.
• width and height reserve space for the player, so the page does not jump while it loads, just like for images.
• poster is an image shown before the video starts. Without it, the browser shows the first frame, which is often black or blurry.
• <source> names the video file, and type tells the browser its format.
• The paragraph inside is fallback content. Only browsers that cannot play the video show it. A download link is a good fallback.

Controlling loading with preload

Video files are large. The preload attribute tells the browser how much to download before the visitor presses play:

preload is a hint. The browser may do less than you ask, for example when the device is on a slow connection or saving data. Choosing none or metadata is kind to visitors who pay for every megabyte.

Offering more than one format

Different files can hold video in different formats (also called containers and codecs). You can list several <source> elements, and the browser plays the first one it supports. Thanks to the type attribute, it skips the ones it cannot play without downloading them.

<video controls width="640" height="360" poster="images/match-poster.jpg" preload="none">
  <source src="videos/school-final.webm" type="video/webm">
  <source src="videos/school-final.mp4" type="video/mp4">
  <p><a href="videos/school-final.mp4">Download the school cricket final highlights (MP4)</a>.</p>
</video>

An MP4 file with H.264 video and AAC audio plays in every current browser, so it is the safe choice and a good last option. WebM files are often smaller, so it is common to list WebM first and keep MP4 as the fallback.

Autoplay, muted, loop and playsinline

You may want a short, silent video playing in the background of a page header. Four boolean attributes handle this:

<video autoplay muted loop playsinline width="1280" height="720" poster="images/campus-poster.jpg">
  <source src="videos/campus-loop.mp4" type="video/mp4">
</video>

• autoplay asks the browser to start playing as soon as it can.
• muted starts with the sound off. Most browsers block autoplay with sound, because unexpected noise annoys people. A muted video is usually allowed to autoplay.
• loop starts again from the beginning when the video ends.
• playsinline asks phones to play the video inside the page instead of switching to full screen. iPhones in particular need it.

Use autoplay rarely. Moving pictures distract readers, use mobile data and can make some people feel unwell. If a video moves for more than a few seconds, visitors must be able to pause it, so keep controls or add your own pause button.

Captions and subtitles with track

Captions help deaf and hard-of-hearing visitors, people watching on a noisy bus without headphones, and people who understand the language better when they read it. The <track> element adds a text track to a video. It is a void element and goes inside <video>, after the <source> elements.

The track itself is a plain text file in WebVTT format, usually with the .vtt extension. It starts with the word WEBVTT, followed by timed cues:

WEBVTT

00:00:00.000 --> 00:00:04.000
Namaste! Today we will make crispy dosas at home.

00:00:04.500 --> 00:00:09.000
[sizzling] First, make sure the tawa is really hot.

Then connect one or more tracks to the video:

<video controls width="640" height="360" poster="images/dosa-poster.jpg" preload="metadata">
  <source src="videos/dosa-recipe.mp4" type="video/mp4">
  <track kind="captions" src="captions/dosa-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="captions/dosa-hi.vtt" srclang="hi" label="Hindi">
</video>

Captions and subtitles are not quite the same. Subtitles translate the dialogue for people who can hear but do not know the language. Captions also describe important sounds, such as "[sizzling]" or "[crowd cheers]", for people who cannot hear the audio at all.

The .vtt file must come from the same website as the page, or from a server that allows sharing, otherwise the browser will not load it.

Adding audio

The <audio> element works the same way as <video>, without the picture. It is perfect for a podcast episode, a recorded lecture or a pronunciation guide.

<figure>
  <figcaption>Episode 12: How Priya cleared her first job interview</figcaption>
  <audio controls preload="none">
    <source src="audio/episode-12.mp3" type="audio/mpeg">
    <a href="audio/episode-12.mp3">Download episode 12 (MP3, 24 MB)</a>
  </audio>
</figure>

MP3 plays in every current browser. Without controls, an audio element shows nothing on the page at all. For spoken audio, add a written transcript on the page or link to one. It helps deaf visitors, helps people who prefer reading, and gives search engines text to understand.

Where to host your videos

Video files are large and use a lot of bandwidth. For a short clip on your own site, <video> is perfect. For long videos, or when you expect many viewers, most sites upload to a video platform such as YouTube and embed the platform's player. That uses an <iframe>, which you will learn in Iframes & Embeds.

Common mistakes

• Forgetting controls. Visitors see a still picture with no way to play it.
• Autoplaying with sound. Browsers block it, and visitors dislike it. Use muted if you must autoplay.
• No captions or transcript. Many visitors cannot hear the audio or are watching without sound.
• Missing type on <source>. The browser may download part of every file just to test it.
• Uploading a huge file. Compress the video and keep it as short as possible.

Key points

• <video> and <audio> play media natively; add controls so visitors can use them.
• List files in <source> elements with a type; the browser plays the first one it supports.
• poster sets the image shown before playback; width and height reserve space.
• preload is a hint: none, metadata or auto.
• Autoplay generally needs muted; add playsinline for phones and avoid autoplay where you can.
• Add captions or subtitles with <track> and WebVTT files, and transcripts for audio.

<video controls width="1280" height="720" poster="images/lecture-5-poster.jpg" preload="metadata">
  <source src="videos/lecture-5.webm" type="video/webm">
  <source src="videos/lecture-5.mp4" type="video/mp4">
  <track kind="captions" src="captions/lecture-5-en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="captions/lecture-5-hi.vtt" srclang="hi" label="Hindi">
  <p><a href="videos/lecture-5.mp4">Download lecture 5 (MP4)</a></p>
</video>