media-volume-range doesn't work in iOS Safari

[nicklee]

The volume slider doesn't work in iOS safari, tested on iPhone 14 pro and iPhone SE, running version 17.4.1 of iOS, video attached:

RPReplay_Final1715592755.mov

[mmcc]

Hmm this is a tricky edge...we probably want to at least disable that range on iOS, since the volume property is read only in that environment.

On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.

Given that's the case...would you rather see the volume slider in the DOM, just in a disabled state? Or removed altogether? I worry a little that folks are going to be pretty confused if it's just not there after they added it.

[nicklee]

I thought that might be the case, but couldn’t see it documented anywhere.

Our solution has been to hide the volume slider based on mobile/tablet breakpoints, users can still mute/unmute via the toggle button. If the slider is displayed it’s confusing for the users who do interact with the it, when it doesn’t actually do anything.

[luwes]

There is also a mediavolumeunavailable attribute that can be used to hide the volume range. It's based on a JS check if volume can be manipulated, feature check. That should be even more correct than breakpoints.

See the style rules in the media-theme element that account for features that are not available.
https://github.com/muxinc/media-chrome/blob/main/src/js/media-theme-element.js#L29-L39