CODEWITHSUNDEEP
javascripthtmlaudiovideo
user5988063
user5988063

Reputation:

Adding mute button for video

I'm looking to create a mute button for a video on my page. My page has a background video with a loop and nothing else. But the sound is just very annoying after a while. I found a button to stop the video, but I can't play it again after. Also, I'm looking for a mute only button.

So that's my HTML currently.

<video autoplay id="bgvid" loop>
<source src="videos/chat/chat_noir.mp4" type="video/mp4">
</video>

<div class="mute" onclick="document.getElementById('bgvid').pause()">
<a href="#">Activer/Désaciver le son</a>
</div>

I have the .pause function, but how to make the video continue and only remove the sound? How to replay video or put the sound again?

Upvotes: 1

Views: 4077

Answers (2)

leo.fcx
leo.fcx

Reputation: 6457

You just need to introduce the usage of muted attribute of video html tag as follows:

<div class="mute" onclick="document.getElementById('bgvid').muted = !document.getElementById('bgvid').muted">
  <a href="#">Mute / Avtivate</a>
</div>

See working JSFiddle example.

Upvotes: 2

jkordas
jkordas

Reputation: 155

You could add controls attribute to video tag.

<video autoplay id="bgvid" loop controls>

So you will be able to pause and mute video. Or refer to this if you really want to have your own button for mute.

Upvotes: 0

Related Questions