search

muxinc / media-chrome

Custom elements (web components) for making audio and video player controls that look great in your website or app.
https://media-chrome.org
MIT License
1.83k stars 76 forks source link

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

Closed nicklee closed 6 months ago

nicklee commented 6 months ago

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:

https://github.com/muxinc/media-chrome/assets/298766/b17aba8e-f6b0-4fcd-a031-1a4832bf049f

mmcc commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

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