I wanted to know how I can make my video mute. I was able to program the controllers: there is a button that mutates and one that breaks. I just wanted him to start dumb.
HTML code:
<section id="header">
<div class="inner">
<div id="video">
<img src="images/bg-video.png" id="bg-video">
<!-- poster="images/batimento.jpg"-->
<video id="Video1" width="100%" height="100%" loop>
<source src="video/animacao-lol.mp4" type="video/mp4" />
</video>
</div>
<h1 class="nomes">Lorem ipsum <strong class="slidText">Dolor</strong></h1>
<p class="texto1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque. <br>Cras sit amet ligula
ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>
<center>
<ul class="actions">
<li><a href="#one" class="botao-circulo scrolly"><img src="images/seta-baixo.png"></a></li>
</ul>
</center>
</div>
<div id="buttonbar">
<button id="volDn"><img src="images/video/menos.png" id="menos"/></button>
<button id="volUp"><img src="images/video/mais.png" id="btn-mais"/></button>
<button id="mute"><img src="images/video/som.png" id="btn-mudo"/></button>
</div>
</section>
o JS:
function init() {
var video = document.getElementById("Video1");
if (video.canPlayType) {
document.getElementById("buttonbar").style.display = "inline";
function setVol(value) {
var vol = video.volume;
vol += value;
if (vol >= 0 && vol <= 1) {
video.volume = vol;
} else {
video.volume = (vol < 0) ? 0 : 1;
}
}
document.getElementById("volDn").addEventListener("click", function () {
setVol(-.1); // down by 10%
}, false);
document.getElementById("volUp").addEventListener("click", function () {
setVol(.1); // up by 10%
}, false);
document.getElementById("mute").addEventListener("click", function (evt) {
if (video.muted) {
video.muted = false;
evt.target.innerHTML = "<img alt='volume on button' src='../images/video/mutado.png' id='js-imagem' />"
} else {
video.muted = true;
evt.target.innerHTML = "<img alt='volume off button' src='../images/video/desmutado.png' />"
}
}, false);
}
}