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