<media-mute-button>

The <media-mute-button> component is used to toggle the sound the media. The icon will display whether sound is enabled and the general volume level.

The contents and behavior of the <media-mute-button> will update automatically based on the media state.

• When the volume is off, the component will display the contents of the off slot.
• When the volume is low, 0-50%, the component will display the contents of the low slot.
• When the volume is medium, 50-75%, the component will display the contents of the medium slot.
• When the volume is high, 75-100%, the component will display the contents of the hight slot.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
  </video>
  <media-control-bar>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
  </media-control-bar>
</media-controller>

You can modify the contents of the <media-mute-button> componnt using slots. This is useful if you’d like to use your own custom mute button instead of the default one provided by media-chrome.

Here’s an example of how you can replace the volume levels with the words that correspond to the level.

<media-controller defaultsubtitles>
  <video
    playsinline muted crossorigin
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
  >
  </video>
  <media-control-bar>
    <media-volume-range></media-volume-range>
    <media-mute-button>
      <span slot="high">High</span>
      <span slot="medium">Medium</span>
      <span slot="low">Low</span>
      <span slot="off">Off</span>
    </media-mute-button>
  </media-control-bar>
</media-controller>

The <media-mute-button> doesn’t expose any configuration attributes. However, it will be updated with Media UI Attributes any time the volume level changes.

You can use these attributes to style the button. For example, turn the background color red when the media is muted.

media-mute-button[mediavolumelevel="off"] {
  --media-control-background: red;
}

The media UI attributes will be set automatically by the controller if they are connected via nesting or the mediacontroller attribute. Only set these attributes manually if you know what you're doing.