I have a problem in my code that handles my video with mute and the volume but it is not working follow my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nova Era Team</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/video.js"></script>
</head>
<body>
<header>
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Games</a></li>
<li><a href="">Eventos</a></li>
<li><a href="">Team</a></li>
<li><a href="">Contato</a></li>
<li><a href="">Ajuda</a></li>
<li><a href="">Forum</a></li>
</ul>
<p class="text-center"><img src="images/linha-estilo-menu.png" class="seta-menu"></p>
<img src="images/bg-video.png" id="bg-video">
<div id="video">
<video id="Video1" width="100%" height="100%" loop>
<source src="video/League-warrios.mp4" type="video/mp4" />
</video>
</div>
<div id="texto-header">
<h1>Lorem Ipsum <strong>Dolor</strong></h1>
<p>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>
</div>
<p class="text-center">
<a href="#" class="botao-circulo"><img src="images/seta-baixo.png"></a>
</p>
<div id="buttonbar" data-center="opacity: 0" data--200-bottom="opacity: 1" data-206-top="opacity: 0" data-106-top="opacity: 0">
<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>
</header>
</body> </html>
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/som-desativado.png'/>"
} else {
video.muted = true;
evt.target.innerHTML = "<img src=\"images/video/som.png\"/>"
}
}, false);
}
video.muted = true;
}