Audio and video

Add media with <audio> and <video>.

The audio element

The <audio> element adds sound to the page: a music track, a podcast episode, a voice note. The src attribute carries the sound file address, just like in img.

If you do not add the controls attribute, the browser does not show any audio player on the page; the sound file loads, but the user has no button to play it. With controls, the play, pause and volume buttons appear: <audio src="..." controls></audio>. audio needs a closing tag; you can also place extra content inside.

The video element

The <video> element adds a video to the page. Its use is very close to audio: src for the address, controls for the play buttons. It is written as <video src="..." controls></video>.

For video, controls is almost required; without it the user cannot start the video. You can also set a still preview image with the poster attribute, but the basic usage starts with src and controls.

Exercise Add a video with controls

Add a <video> element to body. Write a realistic video address in src and add the controls attribute. Do not forget the closing tag.

Show example solution

<body>
  <video src="https://example.com/documentary/birds.mp4" controls></video>
</body>

Test yourself

What does the controls attribute do?
- It fixes the image size
- It autoplays the video
- It shows alternative text
- It shows play, pause and volume buttons
Show answer

It shows play, pause and volume buttons — Correct. controls shows the play, pause and volume buttons on the page.

Add controls to the video

<video src="https://example.com/documentary/birds.mp4" ____></video>

Show answer

<video src="https://example.com/documentary/birds.mp4" controls></video>

Match the media elements

audio

Plays sound
video

Plays video
img

Loads image
controls

Shows play buttons

Next lesson: Alternative sources

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies