📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › HTML Fundamentals › Audio and Video

Audio and Video

5 min read Quiz at the end
The video element plays video natively without plugins. Add controls, poster, and width attributes. Provide multiple source formats for browser compatibility. The audio element works the same way for audio content.

HTML5 Audio and Video

<!-- Video -->
<video controls width="640" poster="thumb.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support video.
</video>

<!-- Audio -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
</audio>
Topic Quiz · 5 questions

Test your understanding before moving on

1. Which attribute adds player controls?
💡 The controls attribute adds built-in browser play/pause/volume controls.
2. What does the poster attribute do on video?
💡 poster="image.jpg" shows that image as the video thumbnail before playback.
3. Why provide multiple source elements?
💡 Different browsers support different formats (MP4, WebM) — provide multiple sources as fallbacks.
4. What does autoplay do?
💡 autoplay starts playback immediately — browsers often block this unless muted.
5. Which HTML element embeds audio?
💡 <audio> is the HTML element for embedding audio content.