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?

html css ios cordova ionic-framework 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