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.11k stars 56 forks source link

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

Closed nicklee closed 1 month ago

nicklee commented 1 month 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 1 month 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 1 month 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 1 month 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