Audio & Video

Before HTML5, playing media in a browser meant relying on a plugin like Flash. The <video> and <audio> elements made that a native, built-in feature instead.

<video>

The controls attribute is what adds the play/pause bar, volume, and fullscreen button — without it you'd only see a bare video frame with no way to interact with it. Try adding autoplay or loop below (there's no real video file behind this preview, so the player itself is what to look at, not the picture):

<audio>

Same idea, no picture — just a compact playback bar:

Why multiple <source> tags

Not every browser supports every file format equally well. Rather than picking one format and hoping, you can list several <source> elements — the browser plays the first one it recognizes and ignores the rest:

<video controls>
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4" type="video/mp4">
</video>

Other attributes worth knowing

• autoplay — starts playback immediately. Most browsers block this unless the media is also muted.
• loop — restarts from the beginning when playback ends.
• muted — starts with the volume off.
• poster (video only) — an image shown before playback starts.
• <track> — nested inside <video>, adds subtitles or captions from a separate file.