Video inline in Ionic/Phonegap abspielen (webkit-playsinline funktioniert nicht)

Question

Ich verwende den HTML5-Video-Tag, um ein Video in meiner ionischen App zu spielen. Hier ist mein Code:

<video autoplay loop class="video" webkit-playsinline> 
    <source src="videos/polina.mp4" type='video/mp4; codecs="h.264"' > 
    <source src="videos/polina.webm" type="video/webm"> 
</video> 

Das Video autoplays gut, aber das Video öffnet sich in den einheimischen Spieler und keine Inline spielen. Nach einigen Recherchen habe ich verstanden, dass webkit-playsinline dieses Problem lösen sollte, zumindest auf iOS, aber das scheint nicht der Fall für mich auf iOS8 & 9 zu testen.

Ich habe videogular versucht und ich bekomme immer noch der verfluchte einheimische Spieler erscheint.

Ich habe sogar ein bisschen bezahlt, um diesen Code hier zu bekommen: https://creativemarket.com/DenzilDoyle/194974-Ionic-background-video, das genau veranschaulicht, was ich versuche zu erstellen (ein Hintergrundvideo auf meinem Login-Bildschirm), aber das Video öffnet sich immer noch in den nativen Player.

Hat es jemand geschafft, ein Video zu bekommen, um inline auf ihrer ionic/phonegap App zu spielen? Wenn das so ist, wie?

Answer 1

Der Grund, warum das UIWebView nicht für die Inline-Wiedergabe von Videos konfiguriert wurde. Auf iPads ist es standardmäßig erlaubt, aber auf iPhones ist es nicht möglich.

Sie können dies leicht ermöglichen, indem Sie diese in Ihrer config.xml:

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

Die UIWebView sollten dann das Attribut Webkit-playsinline respektieren.

Auch der Code funktioniert auf den meisten Android-Geräten (vor allem, wenn Sie das Crosswalk-Plugin hinzufügen). Allerdings sollten Sie zuerst das WebM, dann die MP4-Datei, um Probleme mit einigen Versionen von Chrome zu vermeiden).

Sie sollten auch ein Poster = "firstFrame.jpg" zum Video-Tag hinzufügen, damit Sie ein Bild erhalten, während das Video für die Wiedergabe bereit ist. Das JPG sollte der erste Frame des Videos sein (benutze den Video Editor, den du gerne extrahierst).

Sehen Sie diese Seite für ein viel vollständigeres Beispiel (und frei ...). Ich habe dies auf Android/iOS mit Cordova mit minimalen Änderungen verwendet. Die notwendigen Änderungen waren, laden Sie die Dateien in das Projekt, verwenden Sie CrossWalk für Android, entfernen Sie den Medien-Selektor in der CSS (es stoppt Video auf kleinen Bildschirmen von Design, aber es funktioniert in Cordova), fügen Sie das Spielattribut-Attribut hinzu und schließlich hinzufügen die Einstellung in der Datei config.xml.

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video