Muting HTML5 Video Embed without Controls

hello -

i’m hosting a video in an HTML element and the controls are hidden. the video will play and pause using the “onclick” parameter.

i want to provide my users with a toggle mute button. i tried to set a state that would add/remove the “muted” parameter in the HTML. this works but causes the video to restart, which is not acceptable for this use case.

i have found some javascript tutorials for customizing HTML5 video controls. before i go about teaching myself how to do this, i wanted to ask if there is an easier way to just simply mute the page instead?

code below for reference…

<video width="100%" height="100%" muted onclick="this.paused ? this.play() : this.pause();">
      <source src="//fac1c99cc7c9be66bfa1e3d4110198e7.cdn.bubble.io/f1723055401447x422121782422347100/Full%20Video%20with%20Audio.mp4
" type="video/mp4">
</video>

Hi! A quick fix below

<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>
  • Video Element: The video will play/pause when clicked, as described.
  • Button: This button toggles the mute state of the video.
  • JavaScript Function: The toggleMute() function changes the muted property of the video element and updates the button text accordingly.

This method allows you to mute/unmute the video without reloading it or causing it to restart.

thanks @Zeroic this is exactly what i was looking for. :slight_smile:

i’ve added the code snippet to the HTML element and added the ID attributes to the both the HTML element and button, however the mute isn’t working yet. is there another step that i’m missing?

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