HTML Tutorial

HTML Media: Video and Audio

HTML5 introduced native <video> and <audio> elements, removing the need for third-party plugins like Flash that older sites relied on for embedding media. Both elements share a similar structure and a common attribute set for controlling playback behavior.

Why it matters

Video and audio play natively in the browser with one element, no plugin needed. The details decide whether they are usable: without controls the user cannot pause, an autoplaying video with sound is blocked by the browser, and without captions the content is closed to deaf users and to anyone watching with the sound off.

The video and audio Elements

<video> embeds a video file, and <audio> embeds a sound file; both accept one or more <source> child elements pointing to different file formats so the browser can pick the first one it supports. The controls attribute is essential for usability — without it, no play/pause/volume UI is shown at all, and the user has no way to interact with the media.

Common Attributes

Beyond controls, several attributes shape playback behavior and should be used deliberately rather than by default.

autoplay — starts playback automatically; generally discouraged for audio/video with sound, since most browsers block autoplay with sound unless the media is also muted.
muted — starts the media muted; often combined with autoplay for background-style video.
loop — restarts playback automatically when it ends.
poster (video only) — an image shown before playback begins.

Fallback Content

Any text placed between the opening and closing <video> or <audio> tags is fallback content, shown only if the browser doesn't support the element at all. This is rarely an issue in modern browsers, but it's good practice to include a brief message and, ideally, a plain download link to the media file.

Example

A video with multiple sources, controls, and fallback content

HTML

<video controls width="640" height="360" poster="preview.jpg">
  <source src="tutorial.mp4" type="video/mp4">
  <source src="tutorial.webm" type="video/webm">
  Your browser does not support HTML video.
  <a href="tutorial.mp4">Download the video</a> instead.
</video>

Output

Displays a 640x360 video player showing a preview image before playback, with visible play/pause and volume controls; browsers without video support instead show the fallback text and a download link.

Common Mistakes

Omitting the controls attribute, leaving users with no way to play, pause, or adjust volume.
Using autoplay with unmuted sound, which most modern browsers silently block anyway.
Providing only a single video format/source, causing playback to fail in browsers that don't support that codec.
Leaving out captions or transcripts for spoken content, which excludes deaf and hard-of-hearing users.

Exercise

Add a video element that shows playback controls, offers two sources (intro.webm and then intro.mp4), has an English captions track from intro.en.vtt, and shows fallback text for browsers that cannot play video.

Expected result: a video player with controls (the files do not exist, so it will not play).

HTML · starter code

<h2>Course introduction</h2>

<!-- TODO: video with controls, two sources, a captions track and fallback text -->

Show hints

Each file goes in its own source element with src and type; the browser uses the first one it can play.
Captions are a track element with kind="captions", srclang="en" and a label.

Show solution

HTML · solution

<h2>Course introduction</h2>

<video controls width="640">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.en.vtt" srclang="en" label="English">
  Your browser does not support the video element.
</video>

Quick quiz

1. What happens when a video element has no controls attribute?

A. The video cannot load
B. Default controls appear anyway
C. The video plays automatically
D. No play, pause or volume controls are shown

Show answer

D. Controls then have to be built with JavaScript, or the attribute added.

2. Browsers generally allow autoplay on a video only if it is also what?

A. Muted
B. Looped
C. Short
D. In MP4 format

Show answer

A. Autoplay with sound is blocked unless the user has interacted with the site.

3. Why list several source elements?

A. To play them one after another
B. So the browser can pick the first format it supports
C. To make the video louder
D. It is required by the specification

Show answer

B. Format support differs between browsers, so alternatives are offered in order of preference.

Interview questions

How do you make video content accessible?

Show answer

Provide captions with a track element so that speech and important sounds are available as text, and a transcript for people who cannot use the video at all. Keep the native controls, which are keyboard accessible, or make custom ones fully operable by keyboard. Do not autoplay with sound, and avoid content that flashes rapidly.

What do the preload and poster attributes do?

Show answer

preload hints how much of the file to fetch before the user presses play: none, metadata for just the duration and dimensions, or auto for as much as the browser sees fit. poster is the URL of an image shown in place of the video until playback starts. Using preload="metadata" with a poster keeps a page with video fast to load.

Key Points to Remember

video and audio are native HTML5 elements requiring no third-party plugins.
The controls attribute is required to give users a visible play/pause/volume interface.
Multiple <source> elements let the browser pick a supported file format.
autoplay with sound is generally blocked by browsers unless the media is also muted.

Practice in the playground

Write and run your own code for this topic, or start from the exercise or an example. Shows a live preview of your HTML, CSS and JavaScript. Your code for each topic is kept in this browser.

Open a blank playground Solve the exercise

Run the examples

Change an input, predict the result, then compare it with the output. Explain why the result changes.

Try A video with multiple sources, controls, and fallback content in Webnest Codelab

Written by

WebNest Studio Engineering Team

Practical lessons from developers working with Java, Python, React, databases and production systems.

Led by Vansh Duggal, Founder, WebNest Studio · Full-stack & software engineering

About the authors More tutorials LinkedIn