Skip to main content
HTML for Beginners
CHAPTER 10 Beginner

HTML Audio and Video Elements

Updated: May 10, 2026
5 min read

# HTML Audio and Video Elements

1. Introduction

Before HTML5, embedding video or audio required clunky third-party plugins like Flash. Today, HTML provides native, fast, and accessible <audio> and <video> tags that work perfectly out of the box.

2. Learning Objectives

  • Embed audio files using <audio>.
  • Embed video files using <video>.
  • Add controls, autoplay, and looping functionality.
  • Provide fallback content for older browsers.

3. Detailed Explanations

The <audio> Element

To play sound (MP3, WAV, OGG), use the <audio> tag. You must include the controls attribute, otherwise, the player will be invisible!
html
12345 
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support the audio element. <!-- Fallback text -->
</audio>

*Note: Providing multiple <source> tags ensures the browser can pick the format it supports best.*

The <video> Element

The <video> tag works similarly but includes visual attributes like width, height, and a poster image.
html
1234 
<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Media Attributes

You can customize the player behavior using these boolean (true/false) attributes:
  • controls: Shows play, pause, and volume buttons.
  • autoplay: Starts playing instantly (Note: Browsers block this unless it is also muted!).
  • muted: Starts with the volume at 0.
  • loop: Restarts the media automatically when it finishes.
  • poster (Video only): Shows an image before the user hits play.
html
12 
<!-- An autoplaying, muted, looping background video -->
<video src="background.mp4" autoplay muted loop poster="thumbnail.jpg"></video>

4. Mini Project: Media Showcase

Let's build a mini media portfolio.
html
1234567891011121314 
<section class="media-gallery">
    <h2>My Latest Podcast</h2>
    <!-- Standard audio player -->
    <audio controls>
        <source src="episode1.mp3" type="audio/mpeg">
    </audio>

    <h2>Cinematic B-Roll</h2>
    <!-- Video with a custom thumbnail (poster) -->
    <video width="100%" controls poster="https://example.com/movie-thumbnail.jpg">
        <source src="b-roll.mp4" type="video/mp4">
        <p>Please upgrade your browser to view this video.</p>
    </video>
</section>

5. MCQs

Q1: Which attribute is required to show the play/pause buttons on an audio element? A) buttons="true" B) show-ui C) controls D) interface *Answer: C*

6. Summary

HTML5 makes rich media incredibly simple. Always use the controls attribute for user accessibility. If you want a video to autoplay (like a background video), you MUST also include the muted attribute, or modern browsers will block it.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Comments, Entities, and Symbols
Next Chapter HTML iframe and Embedding Content

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1