Code for handling video components

Asked

Viewed 560 times

2

I have a problem in my code that manipulates my video with mute and the volume however is not working follows 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>

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/som-desativado.png'/>"
            } else {
                video.muted = true;
                evt.target.innerHTML = "<img src=\"images/video/som.png\"/>"
            }
        }, false);
    }
                video.muted = true;
    }
javascript html5 css3

1 answer

1

Your logic for increasing/reducing volume is working properly. The problem is that in the last line of the init() function, you leave the video as mute:

    video.muted = true;
}

Just remove this line and the sound control will work.

  • hello friend so the video has to start mute I found the problem I forgot to call my init(); in the tag body so it wasn’t working I just realized this anyway thanks for your help even so I think I’ll leave this post here for anyone who has the same problem or even last this code to manipulate a video =3

Browser other questions tagged javascript html5 css3

You are not signed in. Login or sign up in order to post.