Cast & AirPlay buttons - show / hide when available

[endymion1818]

Hello, as you may remember I've been tasked with build a complex player based from your elements. So far it's going great. I like that you have a <media-cast-button> as well as a <media-airplay-button> element.

I was just wondering if there's a built-in API for showing / hiding the cast and airplay buttons based on the browser, or if it's one of those things you decided users should implement?

These are the elements I'm looking at:

• https://www.media-chrome.org/docs/en/components/media-airplay-button
• https://www.media-chrome.org/docs/en/components/media-cast-button

POC: https://codepen.io/endymion1818/pen/eYqXaYw

Thanks

Ben

[luwes]

good question. there is a mechanism built-in Media Chrome for this. HTML attributes are set if the feature is not available. So adding a CSS block like below will hide the buttons if needed. Hope this helps!

    media-captions-button:not([mediasubtitleslist]),
    media-captions-menu:not([mediasubtitleslist]),
    media-captions-menu-button:not([mediasubtitleslist]),
    media-audio-track-menu[mediaaudiotrackunavailable],
    media-audio-track-menu-button[mediaaudiotrackunavailable],
    media-rendition-menu[mediarenditionunavailable],
    media-rendition-menu-button[mediarenditionunavailable],
    media-volume-range[mediavolumeunavailable],
    media-airplay-button[mediaairplayunavailable],
    media-fullscreen-button[mediafullscreenunavailable],
    media-cast-button[mediacastunavailable],
    media-pip-button[mediapipunavailable] {
      display: none;
    }

[endymion1818]

Thanks for the reply, we ended up implementing https://www.npmjs.com/package/@amplitude/ua-parser-js and renders the respective button based on browser detection.