🎵 Chapter Roadmap
1 The Audio Player (<audio>)
Before HTML5, playing music on a website required annoying third-party plugins like Flash Player. Now, HTML has a built-in MP3 player! We use the <audio> tag to embed sound files like music or podcasts.
2 The Video Player (<video>)
Similarly, the <video> element acts as a built-in movie player. Just like images, you should define the width or height so it doesn't break your website's layout.
3 Super Attributes
You can control exactly how your media behaves by adding these single-word attributes to your opening tag:
-
controls
Displays the play/pause buttons, volume slider, and timeline. Without this, the user cannot play the file!
-
loop
The song or video will automatically start over from the beginning every time it finishes.
-
muted
Forces the audio/video to be completely silent (muted) when the page loads.
-
autoplay
Makes the file start playing the second the webpage opens.
⚠️ Browser Rule: Modern browsers hate loud websites! They will BLOCK autoplay unless you also include the "muted" attribute.
4 Thumbnails & Multiple Sources
🖼️ The Poster Attribute
Have you noticed how YouTube videos always show a picture (thumbnail) before you press play? You can do this using the poster attribute! Just give it an image link.
<video controls
poster="thumbnail.jpg">
🔀 Why use <source>?
Not all browsers support the same video formats (like MP4 vs WebM). By putting multiple <source> tags inside, the browser will read them from top to bottom and play the first one it understands!
<video controls>
<source src="vid.webm">
<source src="vid.mp4">
</video>