Javascript Unmute Sound

JavaScript
1

Im trying to make a video play with sound. Websites dont make you play videos with sound so I tried getting round this by adding a play button, that still did not make the sound unmute so I tried adding and unmute popup, it would appear that these still dont work. Here’s the code… :

<!DOCTYPE html>
<htmml lang="en">

    <body>
        <body>
            <div class="myvideo">
                
                <video  id="myVideo">
                    <source src="coolfirst2hours.mp4" type = "video/mp4">
                </video>
                  
            <button id="btnPlay">PLAY</button>
        </div>
        <!--Popup container-->
        <div id="unmute-popup" class="popup">
          <div class="popup-content">
            <h2>Unmute Sound?</h2>
            <p>Do you want to umute the sound?</p>
            <button id="unmute-yes">Yes</button>
            <button id="unmute-no">No</button>
          </div>
        </div>
    
    </body>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
    const videoElem = document.getElementById('myVideo');
    const playPauseButton = document.getElementById('btnPlay');

    playPauseButton.addEventListener('click', () => {
      if (videoElem.paused) {
        videoElem.play();
        videoElem.muted = false;
        playPauseButton.textContent = 'Pause';
        playPauseButton.classList.add('transparent');
      } else {
        videoElem.pause();
        playPauseButton.textContent = 'Play';
        playPauseButton.classList.remove('transparent');
        videoElem.muted = !videoElem.muted;
      }
    });
  });
    </script>
</html>
2

You have double body opening tags.

Body closing tag goes before the closing html tag

1 Like
3

You’ll need to make sure that the play button starts the video and also handles the mute/unmute functionality.
When the video is muted, the popup will appear asking the user if they want to unmute the sound.
If the user chooses “Yes”, the video will unmute. If “No”, the video will stay muted.

1 Like
4

When yes is clicked, the video does not unmute…

5

the script is loaded after the html, maybe you need to remove this event listener and move its content to the global scope?

6

what do you mean by the global scope if I may ask

7

the external scope, where you are not inside any block

8

and how would that be done if I may ask

9

you write the code without putting it inside the the callback and the event listener

1 Like
10

write it as its own function?

11

no, in the global scope
so that this is executed as soon as the script is loaded

why? because I wonder if the DOMContentLoaded has already happened when you create the event listener for it

12

so you’re saying like this?:

<script>
    const videoElem = document.getElementById('myVideo');
    const playPauseButton = document.getElementById('btnPlay');

    playPauseButton.addEventListener('click', () => {
      if (videoElem.paused) {
        videoElem.play();
        videoElem.muted = false;
        playPauseButton.textContent = 'Pause';
        playPauseButton.classList.add('transparent');
      } else {
        videoElem.pause();
        playPauseButton.textContent = 'Play';
        playPauseButton.classList.remove('transparent');
        videoElem.muted = !videoElem.muted;
      }
    });
  
    </script>
13

does that work?

if not, try to set muted to false before starting the video

14

how do you set muted to false before starting the video, it seems to already have a false value

15

here first you start the video then put muted to false, do it the other way around

16

It seems to already be that way in the code…

<script>
    const videoElem = document.getElementById('myVideo');
    const playPauseButton = document.getElementById('btnPlay');

    playPauseButton.addEventListener('click', () => {
      if (videoElem.paused) {
        videoElem.play();
        videoElem.muted = false;
        playPauseButton.textContent = 'Pause';
        playPauseButton.classList.add('transparent');
      } else {
        videoElem.pause();
        playPauseButton.textContent = 'Play';
        playPauseButton.classList.remove('transparent');
        videoElem.muted = !videoElem.muted;
      }
    });
  
    </script>
17

yes, you first start the video then set muted to false
you need to first set muted to false then start the video

Or at least I suppose because muted says if the audio starts or not with the video

18

How do you set muted to false when you start the video?

19

in the same way you are doing right now, but move it to before you start the video

do you know which line starts the video?

20

I suppose you mean this:

<script>
    const videoElem = document.getElementById('myVideo');
    const playPauseButton = document.getElementById('btnPlay');

    videoElem.muted = false;
    playPauseButton.addEventListener('click', () => {
      if (videoElem.paused) {
        videoElem.play();
        
        playPauseButton.textContent = 'Pause';
        playPauseButton.classList.add('transparent');
      } else {
        videoElem.pause();
        playPauseButton.textContent = 'Play';
        playPauseButton.classList.remove('transparent');
        videoElem.muted = !videoElem.muted;
      }
    });
  
    </script>