Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mute/unmute volume control should show on iOS #4478

Closed
rudyzeinoun opened this issue Jul 10, 2017 · 13 comments

Comments

Projects
None yet
10 participants
@rudyzeinoun
Copy link

commented Jul 10, 2017

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

This comment has been minimized.

Copy link

commented Jul 12, 2017

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

This comment has been minimized.

Copy link
Author

commented Jul 12, 2017

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

This comment has been minimized.

Copy link
Member

commented Jul 12, 2017

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 ,then the video can autoplay.
When set "autoplay" in ,then can't autoplay.

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

This comment has been minimized.

Copy link
Author

commented Jul 12, 2017

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

@misteroneill

This comment has been minimized.

Copy link
Member

commented Jul 12, 2017

This looks like a duplicate of #4373

@potsky

This comment has been minimized.

Copy link

commented Oct 3, 2017

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.

nathanallen pushed a commit to doximity/video.js that referenced this issue Feb 13, 2018

nathanallen pushed a commit to doximity/video.js that referenced this issue Feb 14, 2018

nathanallen pushed a commit to doximity/video.js that referenced this issue Feb 14, 2018

nathanallen pushed a commit to doximity/video.js that referenced this issue Feb 14, 2018

nathanallen pushed a commit to doximity/video.js that referenced this issue Feb 14, 2018

nathanallen added a commit to doximity/video.js that referenced this issue Feb 14, 2018

Merge pull request #1 from doximity/na/force-mute-to-display-on-ios
force mute to display on all devices, from videojs#4478
@cmellinas

This comment has been minimized.

Copy link

commented Mar 22, 2018

Hi,
any updates on this issue?
thanks

@FuminoriSugawara

This comment has been minimized.

Copy link

commented Mar 28, 2018

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

This comment has been minimized.

Copy link
Member

commented May 4, 2018

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

@prozak915

This comment has been minimized.

Copy link

commented May 15, 2018

Jtel to edit them on phone ?

@gkatsev gkatsev closed this in 2370416 Jun 21, 2018

@gkatsev

This comment has been minimized.

Copy link
Member

commented Jun 21, 2018

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.

gkatsev added a commit that referenced this issue Jul 9, 2018

feat: show mute toggle button if the tech supports muting volume (#5052)
Currently, VideoJS combines volume control with muted support, and these actions aren't actually the same. Muting/unmuting volume work independently from the volume control. For example, iOS doesn't support controlling volume programmatically but allows muting/unmuting volume.

This change will display the volume control panel and mute toggle button if the tech supports muting volume. The volume slider will continue to be hidden if the platform doesn't allow programmatically control volume. If neither muting nor control volume is supported, volume panel will not be displayed.

Fixes #4478.
@MrWiLofDoom

This comment has been minimized.

Copy link

commented Aug 22, 2018

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

@bcdarius

This comment has been minimized.

Copy link
Contributor

commented Aug 23, 2018

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+.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.