How to hide html5 video controls on iOS 12

Question

HTML5 video player has been showing controls only in iOS 12.x.x even when the controls are set to false in video tag but all other browsers are working fine and don't show the controls.

The scenario is that whenever page loads we autoplay the video on banner but if battery saver feature is turned on then it will not autoplay the video shows the play button with initial thumbnail (only in iOS 12.x.x) while in other browsers it shows the initial thumbnail of the video without any play button.

My code looks like this:

<video id="header-video" autoplay="true" controls="false" playsinline="true" muted="true" loop="true">
  // sources here
</video>

I am looking for the solution to hide this play icon (shown in attached image) but if that's not possible then is there any solution through which I can know that power saving mode is turned on and hide the video (because I have a background for backward compatibility).

Answer 1

I know this was asked over one year ago but I wanted to share the solution for others.

What I did was, I removed the autoplay attribute from the video-element and because I still wanted it to behave as with the attribute I added following js.

const video = document.getElementById('video-input');
video.play();