Audio & Video
Today we look at media on a page: the video tag, the src path to the file, and the controls attribute so visitors can play and pause.
- 1
What media is on a page
Last lesson we showed a still picture with
<img>. Today we play a moving clip. Sound and video are also files the browser must fetch. HTML needs a tag that points to the file and offers play controls.We practise with
<video>. The<audio>tag follows the same idea — a source file and controls — without a picture frame. One example is enough for today. - 2
Someone had a problem to solve
For a long time, playing a clip on a page needed plugins. People wanted a simple HTML sign: here is the file, let the visitor press play. Browsers added built-in media tags so the page itself can carry sound and video.
<video>usessrcfor the file path, like images do. Thecontrolsattribute tells the browser to show the play bar. Without it, the clip may load but visitors have no buttons. - 3
How the browser uses video
The browser reads the opening
<video>tag, loads the file fromsrc, and draws a player whencontrolsis present. Unlike<img>,<video>has a closing tag. You can put fallback text between the tags for old browsers; we keep the example empty for clarity.In the example below,
srcis a full URL that starts withhttps://. Wrong path or unsupported format means the player stays blank. - 4
What we are going to learn today
Read the short
<video>block below, then use the play button in the browser pane. - 5
controls is not optional for beginners
Put
srcandcontrolson the opening tag, then close with</video>. Later you can learn autoplay rules and multiple<source>files. Today one clip with controls is the whole lesson.
What you'll learn
- 1Media files need a special HTML tag
- 2video shows a clip with a player
- 3src points to the media file
- 4controls shows play and pause
- 5audio works the same way, without a picture
Line by line
<video>The opening tag for a video player. Unlike
<img>, this tag needs a matching closing tag.src="https://...flower.mp4"Where the media file lives. Here it is a full URL. A site file path such as
/videos/clip.mp4works the same way.controlsA boolean attribute. Its presence asks the browser to show the play bar. No value is required.
</video>The closing tag. Everything for this video player sits between the opening tag and this tag.
<audio src="..." controls></audio>The audio player element. It takes an audio file (such as MP3 or OGG) via
srcand renders a sound-only player with play, pause, and volume sliders.
Try it yourself
In the interactive editor above, add a <p>Now playing your favorite track</p> right above the audio player and see it update instantly!
Hint: Opening tag with src and controls, then the closing tag. Both video and audio need controls to show play buttons.
Common mistakes
- 1.Forgetting
controls. The file may load, but visitors see no play button. - 2.Treating
<video>or<audio>like<img>and skipping the closing tag. - 3.Using unsupported formats or broken URLs, which leaves an empty player frame.
Interview prep (Click to reveal)
Q: What does the controls attribute do?▼
It tells the browser to show the default play, pause, seek bar, and volume UI for the media element. Without it, the visitor has no way to interact with the media.
Q: How is video different from img?▼
<img> is a self-closing void tag for a static picture. <video> requires a closing tag (</video>) and plays time-based video streams with playback controls.
Q: Can we specify multiple formats for better browser support?▼
Yes! You can nest multiple <source src="file.webm" type="video/webm"> and <source src="file.mp4" type="video/mp4"> elements inside <video>. The browser plays the first supported format.