CODEWITHSUNDEEP
javascripthtml
Cristian Leciu
Cristian Leciu

Reputation: 1

Why do the javascript video buttons not work?

I'm only trying to add a mute/unmute button, I followed a couple of tutorials, wrote the same code but it doesn't seem to be working. Also, if any one of you feels particularly generous today, could you please show me how to make a single button that mutes, and when clicked again, unmutes the video sound?

<!DOCTYPE html>
<html>
    <body>
      <div>
        <video id="vid"autoplay muted loop></video>
        <div class="controller">
            <button onclick="muteVideo()" type="button">Mute sound</button>
            <button onclick="unmuteVideo()" type="button">Enable sound</button>
        </div>
      </div>

      
      <script>
        var my=document.getElementById("vid");
            function playVideo(){
                my.play();
            }
            function muteVideo(){
                my.muted = true;
            }
            function unmuteVideo(){
                my.muted = false;
            }
    </script> 
    </body>
</html>

Upvotes: 0

Views: 35

Answers (2)

Muhammad Awais
Muhammad Awais

Reputation: 11

This Code Works fine

<!DOCTYPE html>
<html>

<body>
    <div>
        <video id="vid" width="400" controls>
            <source src="../../Downloads/Bohemian Rhapsody _ Muppet Music Video _ The Muppets_360p.mp4"
                type="video/mp4">
            <source src="mov_bbb.ogg" type="video/ogg">
            Your browser does not support HTML video.
        </video>
        <div class="controller">
            <button onclick="muteVideo()" type="button">Mute sound</button>
            <button onclick="unmuteVideo()" type="button">Enable sound</button>
        </div>
    </div>


    <script>
        let my = document.getElementById("vid");
        const playVideo = () => {
            my.play();
        }
        function muteVideo() {

            console.log("hello");
            my.muted = true;
        }
        function unmuteVideo() {
            my.muted = false;
        }
    </script>
</body>

</html>

Upvotes: 0

gvmani
gvmani

Reputation: 1600

<!DOCTYPE html>
<html>
    <body>
      <div>
        <video id="vid"autoplay muted loop></video>
        <div class="controller">
            <button onclick="muteUnmuteVideo()" type="button">Mute/Unmute sound</button>
           
        </div>
      </div>

      
      <script>
        var my=document.getElementById("vid");
            function playVideo(){
                my.play();
            }
            function muteUnmuteVideo(){
                my.muted = !my.muted;
            }
            
    </script> 
    </body>
</html>

Upvotes: 1

Related Questions