BeingXpert Learn & Build Future

17. HTML Audio and Video

What you will learn

  • How to add sound with <audio>
  • How to add video with <video>
  • Why you provide more than one file format
  • How to make media accessible

The audio element

The <audio> element plays sound. The controls attribute adds play, pause, and volume buttons. Without it, visitors cannot control the sound.

Example

<audio controls>
  <source src="welcome.mp3" type="audio/mpeg">
  <source src="welcome.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

What visitors see

A small audio player with a play button, a progress bar, and a volume control. It needs a real sound file (welcome.mp3) saved next to your page.

The video element

The <video> element works the same way. Set width and height so the page does not jump while the video loads.

Example

<video controls width="480" height="270" poster="preview.jpg">
  <source src="lesson.mp4" type="video/mp4">
  <source src="lesson.webm" type="video/webm">
  Your browser does not support the video element.
</video>

What visitors see

A video player showing the poster image until the visitor presses play.

The code, step by step

  1. controls shows the player buttons.
  2. <source> names a file. The browser uses the first one it can play.
  3. type tells the browser the file format before it downloads anything.
  4. The text inside the element appears only in browsers that cannot play media.
  5. poster is a picture shown before the video starts.

Useful attributes

Attribute What it does
controls Shows the player controls
autoplay Starts playing automatically. Browsers usually block this unless the media is muted
muted Starts with the sound off
loop Plays again when it ends
preload Hints how much to download: none, metadata, or auto
poster Picture shown before a video plays (video only)

Common file formats

  • Video: MP4 (H.264) is the most widely supported. WebM is another good option.
  • Audio: MP3 is widely supported. Ogg is an alternative.

Making media accessible

  • Add captions to video with <track>, so people who cannot hear it can follow along.
  • Offer a text transcript for audio.
  • Avoid autoplay with sound. It surprises and annoys visitors.

Example

<video controls width="480">
  <source src="lesson.mp4" type="video/mp4">
  <track src="captions.vtt" kind="captions" srclang="en" label="English">
</video>

Large videos slow down your site and use a lot of hosting bandwidth. Many sites upload videos to a video service and embed them with an iframe, which you will learn in the next lesson.

Common mistakes

  • Forgetting controls, so visitors see a video with no way to play it.
  • A wrong file name or path, so the player shows an error.
  • Using only one format that some browsers cannot play.
  • Using media you do not have permission to publish.

Exercise

Write an audio player with controls that plays song.mp3.

Show solution 
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Knowledge check

1. Which attribute shows the play and pause buttons?

controls

2. Why use several <source> elements?

So the browser can pick a format it supports.

3. Which element adds captions to a video?

<track>

Summary

  • <audio> and <video> play media without plugins.
  • Use controls and provide more than one format.
  • Add captions and transcripts for accessibility.
Scroll to Top