How to make text mute/unmute a video

Ask the community
, ,
1

Hi guys,
On my website, I have three pages with videos that auto play upon the page loading. When these videos auto play, they are muted. I enjoy the minimalist design, so I don’t want any of the video controls visible. Here is an example of one of the pages: https://www.notenoughknife. com/jamstudios

As you can see, below the video is text which reads “mute/unmute” - of course, I would like to edit the code for the text, allowing the user to mute and unmute the video. I am using Wix.com, which uses Corvid to edit page code. I have edited with this before, adding “show more/show less” buttons, so I am somewhat familiar.

I have found the code online to either mute or unmute the video, but I can’t for the life of me figure out how to make it do both.

Here is the unmute code:

export function text42_click(event) { $w("#videoPlayer1").unmute();
    }

And here is the mute code:

$w("#videoPlayer1").mute();

Any help would be massively appreciated.

1 Like
2

Hi! I think this may help.

https://www.wix.com/corvid/reference/$w.VideoPlayer.html

~Haiden~

3

They are muted for a reason.
The new autoplay policy for certain browsers only allows video to autoplay when the sound is muted.
https://support.wix.com/en/article/autoplay-on-desktops-and-laptops
https://support.wix.com/en/article/wix-editor-autoplay-on-mobile-and-tablet-devices

To have your video player turn on or off sound, then simply do as you have done in your code but with a button and remember to add the onClick event for the button in the properties panel.

You can also do it with a simple switch element as well as shown in the code below too.

$w.onReady(function () {
});

export function onButton_click(event) {
$w("#videoPlayer1").unmute();
}

export function offButton_click(event) {
$w("#videoPlayer1").mute();
}

export function switch1_change(event) {
if( $w("#switch1").checked ) {
$w("#videoPlayer1").unmute();
}
else {
$w("#videoPlayer1").mute();
}}

Read here for more info on VideoPlayer and Switch.

4

Hey GOS,

Is there a way to make the sound toggle mute from a single button which changes its vector shape when clicked as well to show the user the completed action? The above seems to indicate an on and an off separate buttons unless I’m not following correctly?

This is the page I’m working on with the sound icon bottom right:

I’ve also added the function to unmute to the hide/show transparent menu boxes.

One glitch I’m experiencing is that, for all click areas on Safari the video pauses requiring an additional click to restart it. It doesn’t seem to do this on Chrome. Any ideas?

Thanks so much if you are able to help!