<media-play-button>

The <media-play-button> component is used to toggle playback of the media content.

The contents of the <media-play-button> will update when the media playback state changes.

• When the media is playing, the component will display the contents of its pause slot.
• When the media is paused, the component will display the contents of its play slot.

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

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

Here’s an example of how you can replace the default play and pause icons with the literal words “Play” and “Pause”:

<media-controller>
  <video
    slot="media"
    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
    playsinline
    muted
  ></video>
  <media-play-button>
    <span slot="play">Play</span>
    <span slot="pause">Pause</span>
  </media-play-button>
</media-controller>

Alternatively, if you would like to represent both states using a single element you could use the icon slot instead. This is useful for creating an animated icon that transitions between states. Here’s a basic example that uses CSS to change an element based on the play state.

.my-icon {
  font-weight: bold;
  transition: color .4s;
}

media-play-button:not([mediapaused]) .my-icon span:first-child,
media-play-button[mediapaused] .my-icon span:last-child {
  display: none;
}

media-play-button:not([mediapaused]) .my-icon {
  color: coral;
}

The <media-play-button> does not expose any configuration attributes.
However, it will be updated with media state attributes any time your media playback state changes.

You can use these attributes to apply custom styles to your <media-play-button> element under different state conditions:

media-play-button[media-paused] {
  animation: glow 2s;
}

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.