2

Estou com um problema no meu código que manipula o meu vídeo com mute e o volume porem nao esta funcionando segue o meu código:

<!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;
    }

1 Resposta 1

1

A sua lógica para aumentar/reduzir o volume está funcionando corretamente. O problema é que na última linha da função init(), você deixa o vídeo como mudo:

    video.muted = true;
}

Basta remover esta linha e o controle de som irá funcionar.

1
  • ola amigo entao o video tem que iniciar mudo eu achei o problema eu esqueci de chamar meu init(); na tag body por isso não estava funcionando acabei de perceber isso de qualquer forma obrigado pela sua ajuda mesmo assim acho que vou deixar esse post aqui para quem tiver o mesmo problema ou ate mesmo ultilizar este codigo para manipular um video =3 25/05/2015 às 11:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .