<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;
}

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.