Mute/unmute volume control should show on iOS

[rudyzeinoun]

On iOS, the volume bar is hidden because we cannot control the volume due to an OS restriction. However, the mute/unmute button should still show. This is useful in cases where "autoplay muted playsinline" is used, so the video starts automatically playing, but there would be no way to unmute it, even from the device's hardware volume controls or the OS volume slider.

You can force the controls to display by CSS, by adding:

.video-js .vjs-volume-panel { display: flex !important }
.video-js .vjs-mute-control { display: inline-block !important }

Which allows unmuting the video, but the experience is not optimal and the volume slider still takes some space until it times out and closes back. This can be fixed by more CSS changes, but these are dirty workarounds.

The expected result is to show the volume icon on iOS to allow mute/unmute.

[arashilan]

Excuse me, how can video autoplay on iOS?
When set "autoplay muted" in <video>,then the video can autoplay.
When set "autoplay" in <video>,then can't autoplay.

Use video.js in html5 .

[rudyzeinoun]

If you're on iOS, the volume mute/unmute button (in VideoJS's skin) is hidden, because iOS doesn't let you control volume using JavaScript.
So if you have autoplay muted, there's no way for the user to unmute.

[misteroneill]

We are currently planning a sweep related to the autoplay/muted/playsinline complexity this quarter. Stay tuned!

Excuse me, how can video autoplay on iOS?
When set "autoplay muted" in

Yes, that is the behavior of iOS Safari and Android Chrome. You cannot autoplay non-muted video on those platforms. Safari 11 on macOS will behave the same way.

[rudyzeinoun]

I would advise having an always-showing unmute button when this mode is on, similar to how Facebook does it.

[misteroneill]

This looks like a duplicate of #4373

[potsky]

Agree with @rudyzeinoun, on iOS, the autoplay/muted/playsinline works but I need to use a ugly settimout to remove vis-hidden class from volume panel the mute button.

[cmellinas]

Hi,
any updates on this issue?
thanks

[FuminoriSugawara]

Hi,
I tried to show volume control button.
This code worked on iOS 11 with video.js v6.8.0.
I hope I can be of any help.
Thanks.

<video id="video_player" class="video-js vjs-default-skin" controls preload playsinline muted>
    <source src="/path/to/video" type="application/x-mpegURL">
</video>
/* ... */
<script>
var player = videojs('video_player');
player.ready(function() {
    player.on('play', function() {
            player.controlBar.volumePanel.show();
            player.controlBar.volumePanel.volumeControl.show();
            player.controlBar.volumePanel.muteToggle.show();
    });
});
</script>

[gkatsev]

There's a PR for this being worked on by @bcdarius: #5052.

[prozak915]

Jtel to edit them on phone ?

[gkatsev]

This should be fixed in master now, a release of 7 is coming soon and it'll be back ported to 6.x at some point as well.

[MrWiLofDoom]

Is this fixed in 7? I am running 7 and I'm still not seeing the mute button

[bcdarius]

The mute toggle button is displayed on iOS in v7.1.0+. Is that the version you're testing on? I'm seeing the mute toggle button fine here https://output.jsbin.com/sovubus. Another thing to note is that the mute control will be visible in iOS versions that supports muting volume programmatically only, ie iOS 10+.

[simeyla]

I'd love to see a bigUnmuteButton analogous to bigPlayButton