HTML-Video-Hintergrund funktioniert nicht für iOS auf Ionic Framework

Ich versuche, einen Vollbild-Videohintergrund für meine IonicApp zu erhalten. Er funktioniert einwandfrei unter Android und im Browser. Wenn ich die App jedoch auf einem iPhone im Xcode-Simulator ausführe, ist dies nur ein weißer Hintergrund und das Video wird nicht geladen .

HTML Quelltext:

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

CSS-Code:

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

Ich habe dies auch in der Datei config.xml hinzugefügt

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

Vermisse ich etwas

— Courtney White
quelle

Haben Sie es mit dem absoluten "nativen" Pfad versucht file:///android_asset/www/?

— Johannchopin

Sind Sie sicher, dass der Video-Codec Ihres Videos auf iOS funktioniert?

— Gerüst

"Vermisse ich etwas?" - Was haben Sie bisher getan, um dies zu debuggen?

— CBroe

@johannchopin Ionic gibt ausdrücklich an, den von mir veröffentlichten Assets-Pfad zu verwenden. Er funktioniert mit jeder anderen Ressource (Laden von SVGs, JPGs und anderen Assets). scaff Der mp4 verwendet den h.264-Codec, der auf iOS-Geräten unterstützt wird: i.imgur.com/lij4wwo.png CBroe Ich habe versucht, das Simulator-Systemprotokoll sowie die Debug-Konsole in Safari zu überprüfen, kann dies aber nicht Suchen oder Produzieren von Fehlermeldungen zum Videohintergrund.

— Courtney White

Versuchen Sie möglicherweise, dem CSS-Code eine absolute Position hinzuzufügen.

— Dmytro Cheglakov

Antworten:

Verwenden Sie UIWebView oder WKWebView? Wenn Sie UIWebView verwenden, empfehle ich Ihnen ein Upgrade, da es von Apple bei der Veröffentlichung Ihrer App nicht mehr akzeptiert wird.

Es gibt viele veraltete Informationen für beide von ionic. Stellen Sie sicher, dass Sie auf dem neuesten Stand sind.

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

Wenn Sie WKWebView verwenden, sollten Sie Folgendes tun:

Add ionic: zu den Standard-src- und media-src-Einträgen Ihrer Content-Security-Richtlinie. Tun Sie es zusätzlich zu dem, was Sie bereits dort haben.

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

Dann erhalten Sie in Ihrer * .component.ts eine lokale Video-URL, die mithilfe von funktioniert

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

Ich bin kürzlich auf dasselbe Problem gestoßen, und der einzige Weg, den ich gefunden habe, ist nicht sauber und vorübergehend, aber es funktioniert. Ich benutze einen Iframe.

Hier ist mein Ionencode

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

Ich rufe einen Iframe mit einer URL von meinem Server auf, der das Video im HTML-Format zurückgibt. Hier ist das HTML-Rendering

Auf diese Weise habe ich kein Problem mit IOS.

Dies ist natürlich eine vorübergehende Lösung. Es wäre viel besser, eine Lösung zu finden, ohne einen Iframe zu durchlaufen

Ich hoffe, Ihnen zu helfen

— D_Loki
quelle