Ionic unable to mute html5 video on iOS

Question

I am trying to mute a html5 video on Ionic 1.3 / iOS 10 but so far the video still play with volume equals to 1. This is my HTML

  <video muted="muted" preload="metadata" x-webkit-airplay="allow" webkit-playsinline="webkit-playsinline" class="videoPlayer" on-tap="onTap(1)">
      <source src="video/article1.mp4" type="video/mp4"/>
  </video>

I understand the muted attribute doesn't work on iOS 10 what's why I used JS to set the volume to cero but still doesn't work on iOS thought it works in the browser

var video = $('.videoPlayer');
video.each(function(i){
    $(this).get(0).volume // returns 1
    $(this).get(0).volume = 0 // returns 0 in the browser but 1 on iOS
});

Any idea why this isn't working?

On the other hand I also tried to use cordova-plugin-media but it seems not to be working with mp4 files. Thanks

Answer 1

@ViewChild('videoSelector', { static: false, read: ElementRef }) videoElement: ElementRef;

  ngAfterViewInit() {

this.videoElement.nativeElement.muted = true;

} }