How to make video mute start

Question

I wanted to know how to make my video start mute. I was able to program the controllers: there is a button that Uta and one that desmuta. Only that I wanted him to start already mute.

Code in html:

<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>

the 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);
    }
}

Answer 1

Please check if this works. If, no, I will be editing the answer.

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);
}
            video.muted = true;
}