Kann ich den nativen Vollbild-Videoplayer mit HTML5 auf iPhone oder Android vermeiden?

130

Ich habe eine Web-App erstellt, die das HTML5-Tag und JavaScript-Code verwendet, um andere Inhalte mit dem laufenden Video zu synchronisieren. Es funktioniert hervorragend in Desktop-Browsern: Firefox, Chrome und Safari. Auf einem iPhone oder DroidX wird der native Videoplayer angezeigt und übernimmt den Bildschirm. Dadurch werden die anderen dynamischen Inhalte verdeckt, die ich gleichzeitig mit dem Video anzeigen möchte.

Gibt es einen Weg daran vorbei? Bei Bedarf werde ich herausfinden, wie native Apps für beide Plattformen geschrieben werden, aber es würde mir eine Menge Aufwand ersparen, wenn ich mich nur an HTML5 / JavaScript halten könnte.

iphone android html video fullscreen AlpineCarver
quelle
1
Tatsächlich sind Browser-Implementierungen von A / V-Playern in iOS und Android höllisch fehlerhaft. Probieren Sie mehrere Spieler auf der Seite aus oder versuchen Sie, ihnen stilvolle Steuerelemente hinzuzufügen, und Sie werden sehen - es ist unbrauchbar. Also, wahrscheinlich externe Vollbild-App zum Abspielen von Videos - ist nicht so schlecht;)
tuxSlayer
1
Ich freue mich jedes Mal, wenn Apple-Geräte meine Inhalte auf die beabsichtigte Weise rendern. Ich pflege das zu feiern.
Anders Lindén
Technisch nein, aber es gibt ein paar Bibliotheken, die es möglich machen, wie iPhone-Inline-Video (Offenlegung: Ich habe es geschrieben)
Fregante

Antworten:

74

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

Kurze Antwort: Verwenden Sie iPhone-Inline-Video , es ermöglicht die Inline-Wiedergabe und synchronisiert das Audio.

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

fregante
quelle
Es funktioniert nicht im Captive Network Assistant (Captive Portal)
Dominik Vogt
54

Es gibt eine Eigenschaft, die die Online-Medienwiedergabe im iOS-Webbrowser allowsInlineMediaPlaybackaktiviert / deaktiviert (wenn Sie eine native App schreiben, ist dies die Eigenschaft einer UIWebView). Auf dem iPhone ist dies standardmäßig eingestellt NO, auf dem iPad jedoch auf YES.

Zum Glück können Sie dieses Verhalten auch in HTML wie folgt anpassen:

<video id="myVideo" width="280" height="140" webkit-playsinline>

... das sollte es hoffentlich für Sie klären. Ich weiß nicht, ob es auf Ihren Android-Geräten funktioniert. Es ist eine Webkit-Eigenschaft, also könnte es sein. Jedenfalls einen Versuch wert.

lxt
quelle
25
Danke für den Vorschlag. Leider hat sich das Verhalten, das ich sehe, nicht geändert - native Videoplayer im Vollbildmodus werden sowohl auf dem iPhone als auch auf DroidX angezeigt.
AlpineCarver
5
Ich habe auch dieses Problem. Ich habe das Webkit-Play-Inline und sogar die XML-validierte Version von Webkit-Play-Inline = "Webkit-Play-Inline" hinzugefügt, aber das Verhalten ändert sich nicht
Mike Clagg
7
Dies funktioniert in Safari für iPhone möglicherweise nicht, da die Webansicht keine Inline-Videowiedergabe zulässt. Wenn die Webseite jedoch in Ihrer eigenen UIWebView in Ihrer eigenen App gehostet wird, können Sie diese Eigenschaften festlegen und die Inline-Videowiedergabe ist möglich: webview.allowsInlineMediaPlayback = YES; webview.mediaPlaybackRequiresUserAction = NO;
Willster
14
Dies funktioniert auch in Cordova / PhoneGap. Fügen Sie einfach Folgendes zu Ihrer config.xml im Cordova-Projekt hinzu:<preference name="AllowInlineMediaPlayback" value="true" />
Mr. TA
3
<Einstellungen name = "AllowInlineMediaPlayback" value = "true" /> Großartig!. es funktioniert gut auf meinem iPhone. Vielen Dank.
sirius2013
41

Alte Antwort (gültig bis 2016)

Hier ist ein Apple-Entwicklerlink, der ausdrücklich sagt, dass -

Auf iPhone und iPod touch, bei denen es sich um Geräte mit kleinem Bildschirm handelt, wird "Video NICHT auf der Webseite angezeigt ".

Gerätespezifische Überlegungen zu Safari

Ihre Optionen :

  • Das webkit-playsinlineAttribut funktioniert für HTML5-Videos unter iOS, jedoch nur, wenn Sie die Webseite als Webanwendung auf Ihrem Startbildschirm speichern - Nicht, wenn eine Seite in Safari geöffnet wird
  • Bei einer nativen App mit WebView (oder einer Hybrid-App mit HTML, CSS, JS) UIWebViewkann das Video inline abgespielt werden , jedoch nur, wenn Sie die allowsInlineMediaPlaybackEigenschaft für die UIWebViewKlasse auf true setzen
KingJulian
quelle
1
Siehe meine Kommentare zur akzeptierten Antwort. ICYMI, für Cordova, fügen Sie Ihrer config.xml Folgendes hinzu:<preference name="AllowInlineMediaPlayback" value="true" />
Mr. TA
Auf YouTube.com wird ohne Wiedergabe ohne Vollbild abgespielt
Anthony
Die Antwort ist alt, 2014, und die Dinge haben sich möglicherweise geändert. Außerdem ist youtube.com keine native App mit einem WebView, wie in der Antwort erwähnt. Vielen Dank, dass Sie es bemerkt haben.
KingJulian
18

In iOS 10 Beta 4. Der richtige Code in HTML5 ist

<video src="file.mp4" webkit-playsinline="true" playsinline="true">

webkit-playsinline ist für iOS <10 und playsinline ist für iOS> = 10

Details finden Sie unter https://webkit.org/blog/6784/new-video-policies-for-ios/

iamhite
quelle
11

Laut dieser Seite https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html ist es nur verfügbar, wenn (Nur in einer UIWebView mit der Eigenschaft allowInlineMediaPlayback auf YES aktiviert. ) Ich verstehe in Mobile Safari, dass dies JA auf dem iPad und NEIN auf dem iPhone und iPod Touch ist.

jz-
quelle
4
Es scheint, als würde dies nur funktionieren, wenn Sie eine HTML5-Player-Seite so einrichten, dass sie in einer nativen iOS-App "lebt". Auf einer einfachen alten Webseite funktioniert es sicherlich nicht.
Natlee75
9

Ich weiß nichts über Android, aber Safari auf dem iPhone oder iPod touch spielt aufgrund der geringen Bildschirmgröße alle Videos im Vollbildmodus ab. Auf dem iPad wird das Video auf der Seite abgespielt, der Benutzer kann es jedoch im Vollbildmodus erstellen.

ughoavgfhw
quelle