Html видео фон не работает для iOS на платформе Ioni c

Question

Я пытаюсь получить полноэкранный видео-фон для моего приложения Ionic, оно отлично работает на Android и в браузере, но когда я запускаю приложение на iPhone в симуляторе Xcode, Это просто белый фон и видео не загружается.

Html Код:

 <div class="fullscreen-bg">
    <video autoplay loop muted playsinline webkit-playsinline>
      <source src="/assets/videos/background.mp4" type="video/mp4">
    </video>
 </div>

CSS Код :

.fullscreen-bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
  height: 100vh;
}

Я также добавил это в конфигурацию. xml file

<preference name="AllowInlineMediaPlayback" value="true"/>

Я что-то упустил?

Answer 1

Используете ли вы UIWebView или WKWebView? Если вы используете UIWebView, я рекомендую вам обновить его, так как он больше не принимается Apple при публикации sh вашего приложения.

Существует много устаревшей информации для обоих из ioni c. Убедитесь, что вы смотрите последнюю версию.

https://github.com/ionic-team/cordova-plugin-ionic-webview

Если вы используете WKWebView, вы должны сделать следующее:

Добавить ион c: в записи по умолчанию для политики содержимого sr c и media-sr c. Сделайте это поверх того, что у вас уже есть.

<meta http-equiv="Content-Security-Policy" 
  content="default-src * 'self' ionic: data: gap: 
  https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline';
  media-src * ionic: 'unsafe-inline';">

Затем в вашем * .component.ts получите локальный URL-адрес видео, который работает с помощью

/*declarations*/
private win: any = window;
videoURL: string;

/* put this on onInit or a function you call to return your src
it will return "ionic://localhost/_app_file_/assets/videos/background.mp4"*/

this.videoUrl = this.win.Ionic.WebView.convertFileSrc('/assets/videos/background.mp4');


/* then in your html*/
 <div class="fullscreen-bg">
    <video autoplay loop muted playsinline webkit-playsinline>
      <source src={{videoUrl}}>
    </video>
 </div>

Answer 2

Я недавно столкнулся с той же проблемой, и единственный найденный мной способ - не чистый, временный, но он работает. Я использую iframe.

Вот мой код Ioni c

<div class="video">
    <iframe [src]='videoUrl'></iframe>
</div>

Я вызываю iframe с URL-адреса с моего сервера, который возвращает видео в формате HTML. Вот рендеринг HTML

Благодаря этому у меня нет проблем с IOS.

Это Конечно, временное решение, было бы гораздо лучше найти решение без прохождения через Iframe

Надеюсь помочь вам