Audio & Video
Embed real audio and video players right in your page — no plugins, no Flash.
What you will learn
- Embed video with <video>
- Embed audio with <audio>
- Provide multiple sources and a fallback
Video
The <video> tag plays video. Add controls for the play button, volume and timeline, and optionally width.
<video controls width="360">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support video.
</video>The <video> tag creates the player. controls adds the play/pause button, volume and timeline; width="360" sets its size. Inside, <source> points to the actual video file and type="video/mp4" tells the browser its format. The sentence after it only shows if the browser cannot play video at all.
Note: Output: A 360px-wide video player with play, volume and timeline controls. Press play to watch the sample clip.
Audio
The <audio> tag works the same way for sound.
<audio controls src="https://www.w3schools.com/html/horse.mp3">Your browser does not support audio.</audio>Just like video, controls gives a play button, volume and a timeline, and src points to the sound file. Here we put src directly on the <audio> tag (the short form) instead of using a separate <source> — both ways work.
Note: Output: A small audio player bar with a play button and volume control; press play to hear the clip.
Note: The text inside the tags (“Your browser does not support…”) only appears on very old browsers — a friendly fallback. Use <source> to offer more than one file format.
Watch out: Avoid autoplay with sound — it annoys users and many browsers block it. If you must autoplay, also add muted.
Q. What does the controls attribute do on a <video>?
✍️ Practice
- Embed the sample video above with
controlsand a width of 320. - Embed the sample audio clip and play it.
🏠 Homework
- Make a “media” page with one video and one audio clip, each with a heading and a short description.