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


8

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?


¿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:


1

¿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>

0

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

ingrese la descripción de la imagen aquí

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.