Audio & Video

The <video> and <audio> elements play media natively in the browser, with built-in controls and no plugins. This lesson covers their attributes, providing multiple formats, captions for accessibility, and when to use an external video service instead.

Video

controls shows the browser's play/pause, volume, progress and full-screen controls. Without it, the video can only be controlled by script.
poster is an image shown before the video plays.
Several <source> elements offer different formats; the browser plays the first one it supports.
Content inside <video> after the sources is shown only by browsers that don't support video at all.

Video attributes

Attribute	Effect
`controls`	Show playback controls
`autoplay`	Start automatically — browsers only allow this if the video is also `muted`
`muted`	Start with sound off
`loop`	Restart when finished
`playsinline`	Play within the page on iPhones instead of going full-screen
`preload`	`none`, `metadata` (duration and size only) or `auto` — how much to download in advance
`poster`	Placeholder image
`width`, `height`	Display size; reserves space while loading

Audio

<audio> takes the same attributes as video (except poster, width and height). Without controls, it's invisible.

Formats

Type	Format	MIME type	Notes
Video	MP4 (H.264)	`video/mp4`	Plays everywhere — the safe default
Video	WebM (VP9/AV1)	`video/webm`	Smaller files, open format
Audio	MP3	`audio/mpeg`	Universal
Audio	AAC / Opus	`audio/mp4`, `audio/ogg`	Better quality per byte

Captions and subtitles

Captions make video usable for deaf and hard-of-hearing viewers, people watching with the sound off, and non-native speakers. Add them with <track> pointing to a WebVTT file:

HTML captions.html

<video controls width="640" height="360">
  <source src="talk.mp4" type="video/mp4">
  <track kind="captions" src="talk.en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="talk.pt.vtt" srclang="pt" label="Português">
</video>

TXT talk.en.vtt

WEBVTT

00:00:00.000 --> 00:00:03.500
Welcome to this short introduction to HTML.

00:00:03.500 --> 00:00:07.000
[upbeat music] Let's start with the basics.

kind="captions" transcribes speech and important sounds; kind="subtitles" translates dialogue. For audio-only content like podcasts, provide a text transcript on the page.

Hosting: self-hosted or a video platform?

Video files are large, and serving them efficiently to every device and connection speed (adaptive streaming) is hard. For anything longer than a short clip, most sites upload to YouTube, Vimeo or a video CDN and embed the player with an <iframe> (next lesson). Self-hosting with <video> works well for short loops, product demos and situations where you need full control.

Controlling media with JavaScript

Media elements have methods like play() and pause() and properties like currentTime, volume and duration, so you can build custom players. (Inline onclick keeps this demo short; real projects attach listeners in a script — see the JavaScript events lesson.)

PreviousFavicons & Page Icons NextIframes & Embeds