Plyr: iOS does not show mute or volume button

[TomS-]

Expected behaviour

I've seen this reported a few times dating all the way back to the start of the year. This really is a breaking bug. I'm having people complain that they can not hear video and it turns out they were all on iOS. I tried explicitly defining the controls in the JavaScript but it doesn't show. Is Plyr still being maintained?

Actual behaviour

The mute / unmute and or volume controls should show.

Steps to reproduce

1. Visit https://plyr.io/ it does not show and there is no sound.

Environment

• Browser: Safari
• Operating System: iOS

Console errors (if any)

Link to where the bug is happening

https://plyr.io/

[TomS-]

https://github.com/sampotts/plyr/issues/1310
https://github.com/sampotts/plyr/issues/1439
https://github.com/sampotts/plyr/issues/656
https://github.com/sampotts/plyr/issues/1457

I'm switching to another player until this is fixed.

[lnwu]

@TomS- Which player you are switching to? and can volume controls be controled is ios by javascript?

[TomS-]

@Inwu I switched to VideoJS and haven't had any issues.

[rtarnaud]

It's a simple SASS rule that prevents the volume control to be displayed. Add:

.plyr--is-ios {
    .plyr__volume {
      display: flex !important;
    }
 }

to display it again on iOS. That being said, I am not sure why the author of the library decided that the volume control should be hidden in the first place.

[sampotts]

This will be fixed in the new release (in a day or two). It was a simple CSS issue.

That being said, I am not sure why the author of the library decided that the volume control should be hidden in the first place.

Volume can't be controlled via JS in iOS, only mute/unmute. See https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW11

[sampotts]

Should be fixed in v.3.5.7 👍