Ionic 3 полноэкранный видео фон на iOS - PullRequest
Новая
       9

Ionic 3 полноэкранный видео фон на iOS

0 голосов
/ 28 мая 2018

Я пытаюсь получить полноэкранное фоновое видео на моем компоненте ввода.

Ожидается: Компонент ввода Снимок экрана на ionic-lab

Работает нормально на Android,Но не на iOS.

Фон видео на iOS (эмулятор iOS): Скриншот компонента ввода на iOS

Вот код, который я использую, чтобы получить его, как яожидайте:

CSS: 

...

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
}

...

HTML: 

<ion-header no-border>
     <img src="assets/imgs/logo.png" />
</ion-header>

<ion-content no-scroll>
  <video autoplay muted loop webkit-playsinline playsinline src="video.mp4"></video>
  <ion-slides autoplay="4000" pager loop centeredSlides>
    <ion-slide *ngFor="let slide of slides">
      <h4>{{slide.title}}</h4>
      <p>{{slide.text}}</p>
    </ion-slide>
  </ion-slides>
</ion-content>

<ion-footer no-border>
  <ion-grid>
    <ion-row>
      <ion-col col-12>
        <button mat-raised-button class="btn-booking" color="accent" (click)="push()">
          Zum Buchvorgang
          <mat-icon class="btn-booking-icon">keyboard_arrow_right</mat-icon>
        </button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-footer>

1 Ответ

0 голосов
/ 30 июня 2018

Я добавил fullscreen к <ion-content>.Это решило мою проблему. 

<ion-content fullscreen no-scroll>
  <video autoplay muted loop webkit-playsinline playsinline src="video.mp4"></video>
  <ion-slides autoplay="4000" pager loop centeredSlides>
    <ion-slide *ngFor="let slide of slides">
      <h4>{{slide.title}}</h4>
      <p>{{slide.text}}</p>
    </ion-slide>
  </ion-slides>
</ion-content>
...