O fundo de vídeo em HTML não funciona para iOS na estrutura Ionic

Estou tentando obter um plano de fundo de vídeo em tela cheia para o meu Ionicaplicativo, ele funciona perfeitamente no Android e no navegador, mas quando executo o aplicativo em um iPhone no simulador Xcode, é apenas um plano de fundo branco e o vídeo não carrega .

Código HTML:

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

Código CSS:

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

Eu também adicionei isso no arquivo config.xml

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

Estou esquecendo de algo?

— Courtney White
fonte

Você já tentou com o caminho 'nativo' absoluto usando file:///android_asset/www/?

— johannchopin 23/03

Tem certeza de que o codec de vídeo do seu vídeo funciona no ios?

— scaff 23/03

"Estou esquecendo de algo?" - o que você fez até agora para tentar depurar isso ...?

— CBroe 23/03

O @johannchopin Ionic afirma explicitamente o uso do caminho dos ativos que eu publiquei, ele funciona com todos os outros recursos (carregando SVGs, JPGs e outros ativos). scaff Os usos MP4 codec H.264, que é suportado em dispositivos iOS: i.imgur.com/lij4wwo.png CBroe Eu tentei verificar o registo do Simulador do sistema, bem como o console de depuração no Safari, mas não consigo encontre ou produza mensagens de erro relacionadas ao plano de fundo do vídeo.

— Courtney White

Talvez tente adicionar uma posição absoluta ao código CSS.

— Dmytro Cheglakov 29/03

Respostas:

Você está usando o UIWebView ou o WKWebView? Se você estiver usando o UIWebView, recomendo atualizar, pois ele não é mais aceito pela apple quando você publica seu aplicativo.

Há muita informação desatualizada para ambos, do iônico. Verifique se você está olhando o mais tardar.

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

Se você estiver usando o WKWebView, faça o seguinte:

Inclua ionic: nas entradas default-src e media-src da política de segurança de conteúdo. Faça isso em cima do que você já tem lá.

<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';">

Em seu * .component.ts, obtenha um URL de vídeo local que funcione usando

/*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>

— Yvette Ochoa
fonte

Encontrei o mesmo problema recentemente e a única maneira que encontrei não é limpa e é temporária, mas funciona. Eu uso um iframe.

Aqui está o meu código jônico

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

Eu chamo um iframe com uma URL do meu servidor que retorna o vídeo no formato HTML. Aqui está a renderização HTML

Ao fazer isso, não tenho nenhum problema no IOS.

Obviamente, essa é uma solução temporária; seria muito melhor encontrar uma solução sem passar por um Iframe

Espero ajudá-lo

— D_Loki
fonte