We have integrated Videogular2 library into our Angular 7 Project. Everything works fine in Desktop for both Chrome and Safari. But when i tested the same in Iphone and iPad, Mute functionality is not working. It's working fine in Android Device.
After video start playing, if i click mute icon, i am still hearing Volume sound and icon is still showing as unmuted in UI.
<vg-player (onPlayerReady)="onPlayerReady($event)">
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-controls>
<vg-play-pause></vg-play-pause>
<vg-playback-button></vg-playback-button>
<vg-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
<vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
<vg-mute vgFor="singleVideo" (click)="betterMute(media)"></vg-mute>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<video #media [vgMedia]="media" id="singleVideo" preload="auto" playsinline>
<source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
</video>
</vg-player>
I also tried attaching click event to the vg-mute component.By setting volume to '0' I can't able to hear sound, but still icon is showing as 'unmuted' in UI.
betterMute(media) {
console.log(this.api);
console.log(this.target);
if (typeof this.target['muted'] === 'undefined' || this.target['muted'] === false) {
this.target['muted'] = true;
this.target.elem.muted = true;
this.api.volume = 0;
this.target.volume = 0;
} else {
this.target['muted'] = false;
this.target.elem.muted = false;
this.api.volume = 1;
this.target.volume = 1;
}
}
Version
Videogular2: 6.4.0 Angular: 7 Safari: 12 Mac OS: 10
