muting/unmuting video with jquery doesn't seem to work

Question

I'm trying to force all browsers, including Safari, to play video sound. So I set all videos to be muted. If the user clicks the "Begin" button, then all videos are NOT muted. When you scroll to the videos, they pin and play with ScrollTrigger. However, I do not seem to be successful at getting the videos to be unmuted. Am I not setting the muted property correctly?

NOTE: I am NOT using a conditional. I am just trying to set muted to false:

$("video").prop('muted', false);

This does not seem to be working, as the video plays with no audio even when muted is set to false.

Here is my codepen: https://codepen.io/lschneiderman/pen/mdzBOGP

And here is my code: html

<div class="screen" >
  <p>screen1</p>
  <button id="btnBegin">BEGIN</button>
                
</div>

<div class="screen" style="background-color: orange;">
  <p>screen2</p>
</div>


<div class="screen">                
<video id="teaching" playsinline style="width: 100%;">
      <source src="//newsinteractive.post-gazette.com/.testLaura/videos/teaching2.mp4" type="video/mp4">
        Your browser does not support the video tag.
</video>  
</div>

css:

.screen {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: inline-block;
    overflow: hidden;
    margin-top: -6px;   
    background-color: transparent;
    /*background-image: url('../img/shutterstock_153940343.jpg');
    background-size: cover;*/ /*center top repeat-y;*/
}
#btnBegin {
    position: absolute;
    bottom: 30%;
    left: 50%;
    cursor: pointer;
    z-index: 9999;
}
video, #teaching {
    width: 100vw !important;
    max-height: none !important;
    height: auto !important;
 max-width: 100% !important;
}

jquery:

var audioClicked = false;
$("video").prop('muted', true);

$('#btnBegin').on('clicked', function() {
        audioClicked = true;
    })

    if (audioClicked == true) {
        $("video").prop('muted', false);
    }

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.create({  
          trigger: "#teaching",
          start: "top top", 
          end: "+=1300",
          pin: true,
          pinSpacing: false,
          reverse: true,
          onEnter: () => {
            $('#teaching')[0].play();
          },
          onLeave: () => {
              $('#teaching')[0].pause();
          },
          onLeaveBack: () => {
            $('#teaching')[0].pause();
          },
          onEnterBack: () => {
            $('#teaching')[0].play();
          }
        });

Does this answer your question? [Video mute/unmute with jQuery](https://stackoverflow.com/questions/21852284/video-mute-unmute-with-jquery) — Mahesh Thorat, May 02 '23 at 04:53
@MaheshThorat No, it doesn't. I've correctly set muted to false, yet the audio still plays without sound. — LauraNMS, May 03 '23 at 15:23

score 0 · Accepted Answer · answered May 03 '23 at 15:37

My problem was twofold. First I said:

$('#btnBegin').on('clicked', function() {

Careless error. Should have been:

$('#btnBegin').on('click', function() {

Second, the code never got to

 if (audioClicked == true) {
     $("video").prop('muted', false);
 }

I had to get rid of that code block and change the code block above it to:

$('#btnBegin').on('click', function() {
    audioClicked = true;
    $("video").prop('muted', false);
});

muting/unmuting video with jquery doesn't seem to work

1 Answers1