Adding mute button for video

Question

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?

score 2 · Accepted Answer · answered Mar 16 '16 at 18:08

2

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.

answered Mar 16 '16 at 18:08

leo.fcx

6,137
2
21
37

Thank you. Do you know how to make video play again after stop? (outside of the video controls) – Mar 16 '16 at 18:28
Nevermind, I found `function playpause(){ if (bgvid.paused){ bgvid.play(); }else{ bgvid.pause(); } }` Just weird that it doesn't work with if video play() to pause... Just work with paused(). – Mar 16 '16 at 18:41

score 0 · Answer 2 · edited May 23 '17 at 12:23

0

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.

edited May 23 '17 at 12:23

Community

1
1

answered Mar 16 '16 at 17:55

jkordas

155
6

Adding mute button for video

2 Answers2