<media-airplay-button>

The <media-airplay-button> component is used to bring up the AirPlay menu and select AirPlay playback. The behavior of the <media-airplay-button> will update automatically based on the availability of AirPlay support.

The button will display the contents of the airplay slot, if provided.

NOTE: AirPlay is only available in Safari browsers.

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

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

Here’s an example of how you can replace the default icon with the string “AIRPLAY”.

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

The <media-airplay-button> doesn’t expose any configuration attributes. However, it will be updated with Media UI Attributes any time the selected caption or subtitle changes.

You can use these attributes to style the button. For example, if airplay is unavailable, hide the button:

media-airplay-button[mediaairplayunavailable] {
  display: none;
}

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.