rendition-menu doesn't work in Safari

[MarkLyck]

When using rendition menu, the renditions work in Chrome:

But in Safari they options are not visible:

I used the example from the docs:

<media-rendition-menu hidden anchor="auto">
        <div slot="header">Quality</div>
</media-rendition-menu>

<media-rendition-menu-button></media-rendition-menu-button>

[luwes]

this is probably because on Safari, native HLS is used and that information is not available.

nowadays you could either enable (managed) media source on hls.js which will work on desktop Safari and >= iOS 17.
then the renditions will become available if the videoRenditions are populated.

or you can hide the rendition menu button on devices that do not support it.

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