Ionic 5 HTML5 video remove player controls on iOS

@io-eugene wrote:

Hello guys, I’m migrating existent ionic app from 3rd to 5th version and trapped into issue below.

I have a page where with help of HTML5 player I play video and when it ends we go to the another page.

Everything is fine (I can’t see video controls and redirect after video ends work) for android and browser platform

Screen Shot 2020-05-06 at 2.09.30 PM599×810 89.7 KB

But on iOS, if I tap the screen I see controls, also when video ends I should close it manually to make redirect work.

Screen Shot 2020-05-06 at 2.06.16 PM658×891 69.6 KB

Page html markup with video is very simple

<ion-content forceOverscroll="false">
  <ion-grid style="height: 100%;padding:0;">
    <ion-row style="flex:1;" class="ion-justify-content-center ion-align-items-center">
      <video id="video" [src]="videoPath"
        (canplaythrough)="checkLoaded('video')"
        [style.width]="videoSize.width" [style.height]="videoSize.height"
        [autoplay]="false" playsinline
        [hidden]="!playbackStarted" (ended)="checkEnded('video')"></video>
      <ion-col *ngIf="errorText" size="auto" style="display:flex;flex-direction:column;">
        <div id="error-text" >{{errorText}}</div>
        <ion-button *ngIf="showButton" size="large" strong (touchstart)="abort()">Return to Start</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

I have tried several solutions like pointer-events: none or

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

Guys, what I did wrong? Do you have any ideas how to hide controls on iOS or maybe forbid user interactions during playback and how to close video after playback? Thanks for any help in advance.

Posts: 1

Participants: 1

Read full topic