Skip to main content

HTML Audio and Video

A web page that only shows text and pictures is like a book. With audio and video, the page can talk, sing, teach, and show how things move. A cooking page can play the sizzle, a language lesson can play the pronunciation, and a tutorial can show every click.

For many years, this needed a plugin. Today, it is just HTML: two elements, <audio> and <video>, play media directly in the browser, with built-in controls, keyboard support, and no extra software.

This section shows you how to add media, give it more than one format, add captions for people who cannot hear it, and make it work on every screen size.


What You Will Learn in This Section​

  • Adding sound and video with <audio> and <video>
  • Offering several file formats with <source>
  • Using the built-in controls, and building your own
  • Adding captions and subtitles with <track> and WebVTT files
  • Making media accessible to everyone
  • Making video responsive, so it fits any screen

The Big Idea​

index.html
<video controls width="480" poster="cover.jpg">
  <source src="lesson.webm" type="video/webm">
  <source src="lesson.mp4" type="video/mp4">
  <track kind="captions" src="lesson.en.vtt" srclang="en" label="English">
  <p>
    Your browser cannot play this video.
    <a href="lesson.mp4">Download it instead</a>.
  </p>
</video>

The browser reads the children from top to bottom, picks the first source it can play, loads the captions, and shows the controls. You do not write any JavaScript.

Try It: What Can Your Browser Play?​

Not every browser plays every format. The canPlayType() method lets the page ask. Here it is, asking about common formats:

script.js
const video = document.createElement("video");

console.log(video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'));
console.log(video.canPlayType('video/webm; codecs="vp9, opus"'));
// Each answer is "probably", "maybe", or "" (empty: not supported)

You will see this question again in the Source lesson. In practice, you rarely call canPlayType() yourself, because the <source> element lets the browser choose for you.

Which Element Do I Need?​

index.html
<!-- Sound only -->
<audio controls src="episode.mp3"></audio>

<!-- Sound and picture -->
<video controls src="tutorial.mp4"></video>

<!-- Same media, several formats -->
<video controls>
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4" type="video/mp4">
</video>

<!-- Add captions -->
<video controls src="clip.mp4">
  <track kind="captions" src="clip.en.vtt" srclang="en" label="English">
</video>

What Is in This Section​

Good Habits from the Start​

Before you read the lessons, remember these four ideas. They come back in every one:

  1. Always show controls (controls), unless you build your own full set. A video with no way to pause it is a trap.
  2. Never start sound on its own. Autoplay with sound surprises people, and browsers usually block it anyway.
  3. Provide a text alternative: captions for video, and a transcript for audio.
  4. Mind the weight. Media files are the heaviest part of most pages, so compress them, and do not load what nobody has asked for.
Media is not a secret

Anything a browser can play, a visitor can download. A hidden source or a "disable right-click" script does not protect a file. If media must be private, serve it from a server that checks who is asking.

Accessibility at a Glance​

  • Add captions to every video with speech or meaningful sound.
  • Add a transcript for audio-only content, and for video if you can.
  • Keep controls visible and keyboard-operable. The built-in controls already are.
  • Do not autoplay sound, or flashing or moving content that cannot be paused.
  • Do not flash more than three times in any second.
  • Give media a nearby heading or label, so people know what it is before they play it.

Security and Privacy Notes​

  • Embedding a third-party player (for example through an iframe) can let that company track your visitors. Check what is loaded, and ask for consent where the law requires.
  • Only link to media you have the rights to share. Music, film clips, and voice recordings are usually protected by copyright.
  • Serve media over HTTPS, so browsers do not block it as mixed content.
  • Be careful with user uploads. Check the type and size on the server, and never trust the file name or the type the browser reports.

Global Audience Notes​

  • Media is heavy. Many visitors have slow, expensive, or limited connections. Compress your files, and use preload="none" or preload="metadata" where it makes sense.
  • Offer captions in more than one language (the Subtitles lesson shows how).
  • Do not rely on sound alone to carry instructions: a visitor may be on a train, in a library, or deaf.
  • Check the format support of your audience's browsers. Which formats work best can change over time, so test before you decide.
  • Right-to-left languages need captions that display correctly. WebVTT supports this, and you will see how in the Captions lesson.

Common Mistakes to Avoid​

  1. Forgetting controls, so nobody can play, pause, or change the volume.
  2. Autoplaying with sound.
  3. Only one format, so some browsers cannot play it.
  4. No captions or transcript.
  5. Huge, uncompressed files that make the page slow.
  6. Fixed width and height only, so the video overflows on phones.
  7. No fallback content for browsers that cannot play the media.
  8. Missing type on source, so the browser downloads files it cannot play.
  9. Embedding sound that cannot be paused (looping background music).
  10. Assuming a hidden file is private.

Practice Time​

Try these in your editor, using any short MP3 and MP4 you have the right to use:

  1. Add an audio element with controls, and play it with the keyboard only.
  2. Add a video element with controls and a poster image.
  3. Give the video two source elements, and check which one loads in the network panel.
  4. Add fallback text inside the video, and read it by pointing at an unsupported type.
  5. Run canPlayType() in the console for three formats.
  6. Add preload="none" and see what the page downloads before you press play.
  7. Make the video fit a narrow phone width, with max-width: 100%.
  8. Write a three-line WebVTT file, and attach it with track.
  9. Mute the sound, and check that the video still makes sense. What is missing?
  10. Bonus: list every file in your project that is over 1 MB, and decide how to shrink each one.

Quick Recap​

Click a question to check your answer.

1. Which elements play media in HTML?

audio for sound and video for sound with pictures. Both work without plugins, and both can show built-in controls with the controls attribute.

2. Why use more than one source?

Browsers support different formats. With several source elements, each with a type, the browser plays the first one it understands and skips the rest.

3. How do you make video accessible to people who cannot hear it?

Add captions with a track element and a WebVTT file. Captions show speech and important sounds. A transcript helps too, especially for audio-only content.

4. Why should media never autoplay with sound?

It surprises and distracts visitors, can disturb people around them, makes screen reader speech hard to hear, and most browsers block it anyway.

5. Is media you hide on a page private?

No. Anything the browser can play can be downloaded. Private media must be protected on the server.

Key Takeaways​

  • <audio> and <video> play media directly in the browser, with no plugins.
  • Add controls, and use <source> to offer more than one format.
  • Use <track> to add captions and subtitles, and provide transcripts as well.
  • Never autoplay sound, and keep everything operable by keyboard.
  • Media is heavy: compress it, choose preload carefully, and make it responsive.
  • Hidden media is not private, and embedded players can track visitors.
  • Plan for slow connections, many languages, and visitors who cannot hear or see the media.

Ready to start? Begin with Audio, the simplest media element.