Mute and autoplay video on mobile devices using angular 4

Question

I am using html5 video tag in angular 4 app to autoplay video in background. I am unable to auto mute the video and because of that video is not autoplaying on mobile devices. Code I am using is:

<video playsinline autoplay loop controls = "controls" muted = "muted">
   <source src="banner-video.mp4" type="video/mp4" />
   <source src="banner-video.webm" type="video/webm" />
</video>

PS: Video is autoplaying on laptop but is not getting auto muted.

What are you trying to achieve? Mute it by clicking some button? — Leo Odishvili
@LeoOdishvili No, not by click, I want auto mute to work. Its not working — Bobin Singla
Then, I think the problem is that you are using XHTML syntax? Try to write <video playsinline autoplay loop controls = "controls" muted> — Leo Odishvili

shafrianadhi shafrianadhi · Accepted Answer · 2018-03-22T09:41:20

Its like this question, you can read: Making HTML5 Video work on Android phones for tricky autoplay video.

But as described AngryFridges's answer nowadays muted and autoplay for silent video, you can add the 'muted' and 'autoplay' attributes together to enable autoplay for android devices.

e.g.

<video id="video" class="video" autoplay muted >

Mute and autoplay video on mobile devices using angular 4

1 Answers