Audio and video

Embed sound and video with the audio and video tags, controls and fall-backs.

Lesson 11 of 120% of the track complete

What you'll learn

How to add audio and video, show player controls, offer more than one file format and provide captions.

Why it matters

Tutorials, podcasts and demos are media. HTML plays them natively, with no plug-ins, and gives you controls for free.

Explanation

The two tags are <audio> and <video>. Useful attributes:

controls: show play, pause, volume and a progress bar.
autoplay: start on load. Browsers usually block it unless the video is also muted.
loop: repeat.
muted: start silent.
poster (video): an image shown before playing.
width and height (video): size.

Different browsers support different formats, so you can list several files with <source> and the browser picks the first it can play. Text inside the tag is shown to browsers that do not support it at all.

For accessibility, add captions with a <track kind="captions" src="captions.vtt" srclang="en" label="English"> element inside <video>.

Example

Step-by-step walkthrough

<video controls> shows a player with controls. muted lets it start without sound.
Two <source> elements offer WebM and MP4. The browser plays the first one it understands.
The text inside is only a fall-back for very old browsers.
<audio controls> works the same way, with one MP3 source.
For real projects, add <track> for captions so deaf and hard-of-hearing users can follow.

Try it yourself

Remove muted, add loop, and press play in the preview.

Video playerHTML / CSS

Ctrl+Enter to run

Common mistakes

No controls, which leaves the visitor with nothing to click.
Autoplaying with sound. Most browsers block it, and it annoys people.
Large unoptimised files that slow the page down.
No captions or transcript for speech content.

Quick quiz

Question 1 of 3

Which attribute shows the play and volume buttons?

controlsbuttonsplayer

Question 2 of 3

Why list several <source> elements?

So the browser can pick a format it supportsTo play all of them at onceTo make the file smaller

Question 3 of 3

Which element adds captions?

Summary

<video> and <audio> play media natively; add controls.
Use several <source> formats.
Provide captions with <track>.

Next: page metadata and search engines.

HTML

<video controls width="320" muted>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  Your browser does not support video.
</video>

<p>Audio:</p>
<audio controls>
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>