HTML5 Inline-Video auf iPhone vs iPad / Browser


77

Ich habe einen HTML5-Videoplayer (sehr einfach) erstellt, der perfekt auf dem iPad und dem Browser funktioniert.

Wenn ich es jedoch auf dem iPhone öffne, erhalte ich nur eine Wiedergabetaste, die beim Drücken den nativen Videoplayer in einem neuen Fenster über all meinen Dingen öffnet.

Das bedeutet, dass ich den Zugriff auf meine benutzerdefinierten Steuerelemente und die Zeiterfassung (in Javascript geschrieben) verliere, da das Video jetzt isoliert ausgeführt wird.

Gibt es eine Möglichkeit, Apples Kontrolle über HTML5-Videos auf dem iPhone zu überschreiben und es wie auf dem iPad zum Laufen zu bringen?

Prost


Technisch kann man nicht, aber es gibt ein paar Bibliotheken, die es möglich machen, wie iPhone-Inline-Video (Offenlegung: Ich habe es geschrieben)
Fregante

Antworten:


104

Recht,

Ich ging damit nirgendwo hin und reichte einen Fehler bei Apple ein.

Nach ein paar Wochen meldeten sie sich ganz einfach bei mir und sagten, ich solle dem Video-Tag im HTML-Code "webkit-playinline" hinzufügen und in der UIWebView die Eigenschaft "allowInlineMediaPlayback" hinzufügen.

Am Ende sieht es also so aus:

HTML

<video id="player" width="480" height="320" webkit-playsinline>

Obj-C

webview.allowsInlineMediaPlayback = YES;

Und alles funktioniert gut :)

Ich hoffe, dies hilft jemandem, da es praktisch nicht dokumentiert ist und der einzige Ort, an dem ich einen Verweis auf "webkit-gamesinline" finden konnte, in der iAds-Referenz war, in der steht: "iAds JS only".


26
Ich wollte nur etwas in Ihrer Antwort klarstellen ... Wenn Sie für eine reine Weblösung entwickeln (in diesem Fall kommt UIWebView nicht ins Spiel), funktioniert dies nicht, oder?
Natlee75

8
@Andre: Können Sie mir bitte helfen, indem Sie erklären, wie ich obj-c mit meiner reinen HTML5-Webseite verwenden kann? Ich möchte Video Inline auf dem iPhone im Video-Player meiner HTML5-Site abspielen.
Hiral Vadodaria

9
Wenn Sie Phonegap / Cordova verwenden, können Sie das Abspielen von Inline-Medien <preference name="AllowInlineMediaPlayback" value="true" />in Ihrer Datei config.xml aktivieren UND dem <video>Tag Webkit-Play-Inline hinzufügen
micho

2
Vielen Dank! Ich habe seit Ewigkeiten nach diesen Informationen gesucht.
Paul

2
@Andre Es funktioniert immer noch in einer UIWebView. Ich habe es kürzlich in einer App ausprobiert, damit ich weiß, dass es funktioniert. Es war meine Schuld, ich habe die Frage des OP falsch verstanden und dachte, er würde dies in Mobile Safari (kein UIWebView) versuchen, was die Lösung ist, nach der ich derzeit suche. Im Jahr 2011 konnte ich Video in Safari mithilfe benutzerdefinierter Videosteuerelemente inline abspielen, aber das funktioniert nicht mehr.
Paul

11

Bis iOS Safari die Inline-Videounterstützung implementiert, müssen Sie den Videodecoder in einer vom Web unterstützten Sprache schreiben. Es gibt bereits Implementierungen von Videodecodern, z. B. Broadway für H.264 (Video), jsmpeg für mpeg1 und ogv.js (Video- und Soundunterstützung ).

Beachten Sie, dass der Prozess des Dekodierens eines Videos rechenintensiv ist. Erwarten Sie eine relativ langsame FPS (± 20).

Als Referenz haben diese Leute eine Demo eines Videos vorbereitet , das Sie auf Ihrem iOS-Gerät abspielen können.


4

In iOS 10+

Apple hat das Attribut playsinlinein allen Browsern unter iOS 10 aktiviert , sodass dies nahtlos funktioniert:

<video src="file.mp4" playsinline>

In iOS 8 und iOS 9

Sie können dieses Problem umgehen, indem Sie die Wiedergabe simulieren, indem Sie das Video überfliegen, anstatt es tatsächlich .play()zu bearbeiten.

Sie können iPhone-Inline-Video verwenden , um die Wiedergabe und Audiosynchronisierung (falls vorhanden) zu gewährleisten , und es <video>funktioniert weiterhin wie gewünscht .


1

Haben Sie eine App erstellt oder ist dies für mobile Safari? Wenn Sie eine App haben und UIWebView verwenden, sollten Sie die Eigenschaft allowInlineMediaPlayback von UIWebView festlegen.


Ich habe einen UIWebView-Wrapper! Das klingt nach einem Lebensretter, funktioniert aber nur halbwegs. Ich erhalte die JS-Ereignisse (Cue-Points), aber es läuft aus irgendeinem Grund immer noch im Vollbildmodus mit eigenen Videosteuerelementen: /
Andre

4
Ich versuche das gleiche zu erreichen, aber für mobile Safari (daher kein UIWebView). Hast du einen Hinweis?
Cystack

Entschuldigung, nicht wirklich. Ich habe mir das vor über einem Jahr angesehen und seitdem nicht mehr angeschaut. Viel Glück!
Andre

1

In iOS 10 verhinderte das Hinzufügen des Attributs "PlaySinline" zum HTML5-Video-Tag die Vollbildwiedergabe auf einem iPhone UIWebview erst, als ich auch das Attribut "Steuerelemente" hinzufügte. So habe ich es zum Laufen gebracht:

<video width="100%" height="240" controls playsinline>
      <source src="movie.mp4" type="video/mp4" >
</video>

Mit natürlich auch _webView.allowsInlineMediaPlayback=YES;im ViewController.


0

Es gibt einige Problemumgehungen. Ich arbeite an einer Bibliothek, um diese Funktionalität automatisch zuzulassen. Allerdings, bis Apple Safari auf setzt

webview.allowsInlineMediaPlayback = YES;

dann müssen wir Hacks für das gleiche Verhalten verwenden.

Sie können das Projekt hier überprüfen: https://github.com/newshorts/InlineVideo , um festzustellen , ob es Ihren Anforderungen entspricht.


0

Fügen Sie Ihrer config.xml einfach Folgendes hinzu: <preference name="AllowInlineMediaPlayback" value="true" /> Andernfalls vernachlässigt UIWebView das Attribut webkit-gamesinline.


-1

Sie können dies leicht zulassen, indem Sie dies zu Ihrer config.xml hinzufügen: Die UIWebView sollte dann das Attribut webkit-playinline berücksichtigen.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.