<media-playback-rate-button>

The <media-playback-rate-button> component is used to change the playback speed of your media.

The contents and behavior of the <media-playback-rate-button> will update automatically whenever the playback rate of the media changes.

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-playback-rate-button></media-playback-rate-button>
  </media-control-bar>
</media-controller>

The playback rates that will be cycled through when clicking can be configured using the rates attribute. These will automatically start at whatever the current playback rate is and then cycle from slower to faster rates and then loop back to the slowest rate.

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <!-- Note that the order here doesn't impact the "cycle" order when clicking. -->
    <media-playback-rate-button rates="1.5 0.25 1 0.5 0.75 2"></media-playback-rate-button>
  </media-control-bar>
</media-controller>

The <media-playback-rate-button> is updated with Media UI Attributes any time the playback rate changes.

You can use this to style the button. In this example, we change the primary (text) color based on how fast or slow the current mediaplaybackrate rate is.

media-playback-rate-button[mediaplaybackrate="0"] {
    --media-primary-color: red;
}

media-playback-rate-button[mediaplaybackrate^="0."] {
    --media-primary-color: yellow;
}

media-playback-rate-button:is([mediaplaybackrate^="2"], [mediaplaybackrate^="1."]) {
    --media-primary-color: green;
}
Name Type Description
rates string Set custom playback rates for the user to choose from.
disabled boolean The Boolean disabled attribute makes the element not mutable or focusable.
mediacontroller string The element `id` of the media controller to connect to (if not nested within).
tooltipplacement ('top'|'right'|'bottom'|'left'|'none') The placement of the tooltip, defaults to "top"
notooltip boolean Hides the tooltip if this attribute is present

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.

Name Type Description
mediaplaybackrate string Set to the media playback rate.
Name Default Description
--media-playback-rate-button-display inline-flex display property of button.
--media-primary-color rgb(238 238 238) Default color of text and icon.
--media-secondary-color rgb(20 20 30 / .7) Default color of button background.
--media-text-color var(--media-primary-color, rgb(238 238 238)) color of button text.
--media-icon-color var(--media-primary-color, rgb(238 238 238)) fill color of button icon.
--media-control-display display property of control.
--media-control-background var(--media-secondary-color, rgb(20 20 30 / .7)) background of control.
--media-control-hover-background rgba(50 50 70 / .7) background of control hover state.
--media-control-padding 10px padding of control.
--media-control-height 24px line-height of control.
--media-font var(--media-font-weight, bold) var(--media-font-size, 14px) / var(--media-text-content-height, var(--media-control-height, 24px)) var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif) font shorthand property.
--media-font-weight bold font-weight property.
--media-font-family helvetica neue, segoe ui, roboto, arial, sans-serif font-family property.
--media-font-size 14px font-size property.
--media-text-content-height var(--media-control-height, 24px) line-height of button text.
--media-button-icon-width width of button icon.
--media-button-icon-height var(--media-control-height, 24px) height of button icon.
--media-button-icon-transform transform of button icon.
--media-button-icon-transition transition of button icon.