Mute/unmute audio after click a button

[LSchneiderman]

I have many videos that start out muted autoplaying on loop. When the user scrolls to them, I want the video to become unmuted so the user can hear the video. Once the video scrolls past, I want the video to be muted again.

 

The way I have things coded, the videos become unmuted onLeaveBack, but not onEnter. Why is this happening?

See the Pen eYbNNvj?editors=1111 by lschneiderman (@lschneiderman) on CodePen

[Rodrigo]

Hi,

 

That's because $("#vid1") is a jQuery object and it doesn't have a muted property, so you're trying to set a value to an undefined property.

 

Honestly I would use a Vanilla selector and access the property directly:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/muted

 

Hopefully this helps.

Happy Tweening!

[LSchneiderman]

@Rodrigo why doesn't #vid1 have a muted property? In the html, it's listed as     <video playsinline muted loop autoplay class="subsection" id="vid1">. Doesn't that give #vid1 a muted property?

 

 

[akapowl]

Hi there, let me just quickly jump in.
 

30 minutes ago, LSchneiderman said:

why doesn't #vid1 have a muted property?

 

That is not what Rodrigo said - have a look at the syntax.
 

15 hours ago, Rodrigo said:

$("#vid1") is a jQuery object and it doesn't have a muted property

And now have a look at the console.log()s in following pen.

 

$("#vid1") // <-- This is a jQuery Object where you can not access the muted property just like that

$("#vid1")[0] // When targeted via jQuery this will be the actual DOM element where you could access the muted property

See the Pen abPOVep by akapowl (@akapowl) on CodePen

 

 

 

Also targetting multiple elements like this won't work if I am not totally mistaken.

 

// Not going to work like that

$('video').muted = false



// This will do the job

$('video').each( (i, el) => { 
  el.muted = false  
})

 

Again, have a look at the logs in this other pen.
 

See the Pen WNLvdQV by akapowl (@akapowl) on CodePen

 

 

 

This might help get a better understanding about jQuery Objects:

 

https://learn.jquery.com/using-jquery-core/jquery-object/

 

[mvaneijgen]

Hi @LSchneiderman I also wanted to jump in, because this is almost the same question you've asked before 

 

 

And a really important part of coding is debugging, so I would really advise you to use console.log() to figure if want you want to happen is really happening. I find @akapowl's pen a really good example, just go ham and log every possible property you can think of, so you can figure out what is happening and where the bug is. That way you can easily spot your mistake and fix your own issues and you will really level up your coding skill that way! 

 

console.log( $("#vid1") )

console.log( $("#vid1")[0] )

console.log( document.querySelector('#vid1') )

console.log( '------------')

console.log( $("#vid1").muted )

console.log( $("#vid1")[0].muted )

console.log( document.querySelector('#vid1').muted )

 

[LSchneiderman]

OK, but I am declaring my object  as suggested:

 

I'm using the same code for both videos. At first, the code worked on the first video (the audio could be heard when you scrolled to that video), but not the second (the audio could not be heard). But now, no audio is heard when you scroll to the first video and the second video is frozen. This is what is confusing me.

[akapowl]

 

Edit:

 

I forgot to mention this before:

 

At some point there might be other people re-visiting this thread when having issues with ST and video. Some of them simply might not want to see people in hospital beds or anything related to medical operations and for some others that might actually trigger traumatic memories to resurface which can lead to severe problems up to a point.

 

So for the next time you have a question regarding anything media related, I gently ask you to please include some more neutral media to showcase your issue.

 

Back on the topic from here on out:

 

I'm not 100% sure, but I think what you're experiencing is just related to browser limitations for handling video, tbh.

Have a look at this pen, it doesn't include GSAP or ScrollTrigger in any way.

 

Clicking anywhere on the body will change the muted state of vid1 - but when clicking while the video is not in viewport, it will change the muted state, but it will also pause the video at the same time.

 

See the Pen wvRaxvP by akapowl (@akapowl) on CodePen

 

 

I think something like that is what is also happening in your scenario. It might work for the first video because you are animating it slightly into view before you create the ScrollTrigger(s), and when the ScrollTrigger is created the 1st video will already be slightly in view and thus it will be playing unmuted - but the second one will not be in viewport then, so it will get automatically paused.
 

This pen sort of confirms the above. It will create the ScrollTriggers on click of the body. Here, before clicking scroll down until the second video is in view and the click the body to create the STs - you will see the video will keep on playing and become unmuted. When you scroll back up to the first video though, you will see that one has been automatically paused.

 

See the Pen wvRaxom by akapowl (@akapowl) on CodePen

 

 

 

So you might have to additionally handle playing and pausing the videos yourself via ST's callbacks to work around that limitation - that would of course make the autoplay on the videos redundant then. And I would definitely implement changes onEnterBack and onLeaveBack too, or else you may end up with two videos playing with audio at some point - which can be very annoying from a user's perspective.

 

I hope that will help - if not, maybe someone else has better insight or a better idea.

See the Pen dywoKwP by akapowl (@akapowl) on CodePen

 

[LSchneiderman]

@akapowl Thank you. I will rethink.