Ionic Video Mute Attribute Ignored

Issue

I am having a weird issue where the mute tag on a video element is being ignored.

   <video #media playsinline webkit-playsinline loop muted
   [src]="video_url"
   class="videoPlayer"
   preload="metadata"
   type="video/mp4">
   </video>

The muted or muted="true" is being overlooked and the video continues to be played with sound.

I understand that you can mute videos through java-script and while that works, iOS will not allow the video to be auto played until the video is clicked first.

Is there any reason I would be seeing this behavior with the HTML part of the video?

Thanks,

Troy

Solution

First off, I can see you have

#media

Do you want this to be id="media"?

The other thing I can see is that your

muted="true"

is invalid syntax for declaring a Boolean attribute. Just add muted="muted".

Also, when you say

you can mute videos through java-script and while that works, iOS will not allow the video to be auto played until the video is clicked first.

Do you mean that you want the video to be autoplayed when you load the page? In that case, add autoplay="autoplay".

Answered By - Jack Bashford