Ich versuche, einen Vollbild-Videohintergrund für meine Ionic
App 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
file:///android_asset/www/
?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.
Dann erhalten Sie in Ihrer * .component.ts eine lokale Video-URL, die mithilfe von funktioniert
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
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
quelle