How do I add a mute button to a video in HTML5?

Question

Here is the link.

The video plays with its sound & etc. I want to add the mute button so people can actually pause it. Thanks in advance.

---

Source code:

<section id="video">
  <div class="header-container">
    <div class="video-container">
      <button id="mute-video">Toggle Mute</button>
      <video preload ="true" autoplay ="autoplay" loop volume="0">
        <source src ="video/MPAE_video.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</section>

Answer 1

When you use video and source tag, it'll add basic control by itself like mute, play and pause. just add controls inside video tag.

check this

<video width="640" controls><source src="video/MPAE_video.mp4"></source></video>