如何在视频背景上添加静音/取消静音按钮[在Divi-WordPress]

Question

How can I place a Mute/Unmute Button on a video background (MP4)?

Website Link: http://bsibasketball.com/

Any help would be appreciated.

Thank You So Much!

Answer 1

Try it with this script:

 const btn = document.getElementById('mute'), video = document.querySelector('video'); btn.addEventListener('click', () => { if (btn.value === 'unmuted') { btn.value = 'muted'; btn.innerHTML = 'Unmute'; video.muted = true; } else { btn.value = 'unmuted'; btn.innerHTML = 'Mute'; video.muted = false; } }); 

 <video id="myVideo" autoplay> <source src="https://www.w3schools.com/jsref/movie.mp4" type="video/mp4"> <source src="https://www.w3schools.com/jsref/movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <br> <button id="mute" value="unmuted">Mute</button> 

You are free to use it however you want. You could also make the user to click on the video instead of a button.