El fondo de video HTML no funciona para iOS en el marco iónico

Estoy tratando de obtener un fondo de video de pantalla completa para mi Ionicaplicación, funciona perfectamente bien en Android y el navegador, pero cuando ejecuto la aplicación en un iPhone en el simulador Xcode, es solo un fondo blanco y el video no se carga .

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;
}

También agregué esto en el archivo config.xml

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

¿Me estoy perdiendo de algo?

— Courtney White
fuente

¿Has probado con la ruta absoluta 'nativa' usando file:///android_asset/www/?

— johannchopin

¿Estás seguro de que el códec de video de tu video funciona en ios?

— scaff

"¿Me estoy perdiendo de algo?" - ¿Qué has hecho hasta ahora para tratar de depurar esto ...?

— CBroe

@johannchopin Ionic declara explícitamente que usa la ruta de los activos que publiqué, funciona con todos los demás recursos (carga de SVG, JPG y otros activos). scaff El mp4 usa el códec h.264, que es compatible con dispositivos iOS: i.imgur.com/lij4wwo.png CBroe He intentado verificar el registro del sistema Simulator, así como la consola de depuración dentro de Safari, pero parece que no puedo buscar o generar mensajes de error relacionados con el fondo del video.

— Courtney White

Quizás intente agregar una posición absoluta al código CSS.

— Dmytro Cheglakov

Respuestas:

¿Estás utilizando UIWebView o WKWebView? Si está utilizando UIWebView, le recomiendo que actualice, ya que Apple ya no lo acepta cuando publica su aplicación.

Hay mucha información desactualizada para ambos de iónico. Asegúrate de estar viendo lo último.

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

Si está utilizando WKWebView, debe hacer lo siguiente:

Agregue ionic: a las entradas default-src y media-src de su política de seguridad de contenido. Hazlo encima de lo que ya tienes allí.

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

Luego, en su * .component.ts obtenga una URL de video local que funcione mediante el uso

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

Me he encontrado con el mismo problema recientemente y la única forma que he encontrado no es limpia y es temporal, pero funciona. Yo uso un iframe.

Aquí está mi código iónico

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

Llamo a un iframe con una URL de mi servidor que devuelve el video en formato HTML. Aquí está la representación HTML

Al hacer esto, no tengo ningún problema en iOS.

Por supuesto, esta es una solución temporal, sería mucho mejor encontrar una solución sin pasar por un Iframe

Espero ayudarte

— D_Loki
fuente