Javascript for Muting HTML5 Video

lauren5 · 2024-08-12T15:02:41.871Z

Hello -

I am adding HTML5 video to my website without controls visible but want a custom mute button.

On another post, a community member provided a code snippet that would potentially resolve the issue. However, I can’t get it to work and the community member hasn’t responded to additional clarification - so I’m reposting again to see if anyone else can help.

Snippet below. I’ve added the relevant ID attributes to the video and the button. Is there something else that I’m missing?

<video id="myVideo" width="100%" height="100%" onclick="this.paused ? this.play() : this.pause();">
    <source src="//fac1c99cc7c9be66bfa1e3d4110198e7.cdn.bubble.io/f17230" type="video/mp4">
</video>
<button id="muteButton" onclick="toggleMute()">Mute</button>

<script>
    function toggleMute() {
        var video = document.getElementById('myVideo');
        var button = document.getElementById('muteButton');

        video.muted = !video.muted;
        button.textContent = video.muted ? 'Unmute' : 'Mute';
    }
</script>

Zeroic · 2024-08-13T10:40:24.074Z

Hi! I have created a demo for you here - Created plugins and demos | Bubble Editor

The code that was provided worked when the iFrame option was checked in the HTML element, but wasn’t showing up the mute button. I’ve defined a separate event handler for the mute/unmute option and this should work for you now.

lauren5 · 2024-08-13T15:27:06.877Z

thank you! the preview page requires login credentials. would you mind sending those over for me?

Zeroic · 2024-08-13T15:38:20.291Z

Username: username
Password: password

Alternatively, you can get this from the Settings → General tab in the Bubble editor I have shared

lauren5 · 2024-08-13T19:05:46.222Z

thank you so much. i really appreciate the help. i assume that i can substitute the button for an img (icon) instead, so will try that. i’m not a coder, so if it’s not a huge inconvenience for you provide that edit, you’ll probably save me a ton of time. hopefully other people can benefit from this too. happy to buy you a coffee!

Zeroic · 2024-08-16T11:36:03.209Z

Sure thing - modified the demo page with 2 buttons in Bubble to mute/unmute the video. This should be helpful for you now.

Screenshot 2024-08-16 at 5.05.39 PM693×545 387 KB

lauren5 · 2024-08-16T12:34:27.185Z

thank you so much!

system · 2024-10-21T15:03:26.408Z

This topic was automatically closed after 70 days. New replies are no longer allowed.