it-swarm.com.de

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

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 eingeblendet und übernimmt den Bildschirm. Dadurch wird der andere dynamische Inhalt, den ich gleichzeitig mit dem Video anzeigen möchte, verdeckt.

Gibt es einen Weg, dies zu umgehen? Wenn nötig, werde ich herausfinden, wie man native Apps für beide Plattformen schreibt, aber es würde mir eine Menge Mühe ersparen, wenn ich mich nur an HTML5/JavaScript halten könnte.

114
AlpineCarver

In iOS 10+

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

<video src="file.mp4" playsinline>

In iOS 8 und iOS 9

Kurze Antwort: use iphone-inline-video , aktiviert die Inline-Wiedergabe und synchronisiert das Audio.

Lange Antwort: Sie können dieses Problem umgehen, indem Sie die Wiedergabe simulieren, indem Sie überfliegen das Video anstelle der eigentlichen Funktion .play() 'ing es.

62
fregante

Es gibt eine Eigenschaft, die die Online-Medienwiedergabe im iOS-Webbrowser aktiviert/deaktiviert (wenn Sie eine native App schreiben, ist dies die Eigenschaft allowsInlineMediaPlayback einer UIWebView). Standardmäßig ist dies auf dem iPhone auf NO eingestellt, 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 hoffentlich für Sie klären. Ich weiß nicht, ob es auf Ihren Android Geräten funktionieren wird. Es ist eine Webkit-Eigenschaft, also könnte es. Jedenfalls einen Versuch wert.

51
lxt

Hier ist ein Apple Entwicklerlink, der explizit besagt, dass -

Auf iPhone und iPod touch, bei denen es sich um Geräte mit kleinem Bildschirm handelt, wird "Video [~ # ~] nicht [~ # ~] angezeigt die Webseite "

Safari-Gerätespezifische Überlegungen

[~ # ~] jetzt [~ # ~] :

  • Das webkit-playsinline -Attribut funktioniert für HTML5-Videos unter iOS, aber nur, wenn Sie die Webseite als Webanwendung auf Ihrem Startbildschirm speichern - Nicht, wenn Sie eine Seite in Safari geöffnet haben
  • Bei einer nativen App mit WebView (oder einer Hybrid-App mit HTML, CSS, JS) ermöglicht das UIWebView das Abspielen des Videos inline, jedoch nur, wenn Sie die Eigenschaft allowsInlineMediaPlayback festlegen) für die Klasse UIWebView auf true
40
KingJulian

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/

15
iamhite

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 aktiviert) Die allowInlineMediaPlayback-Eigenschaft ist auf YES gesetzt.) Ich verstehe, dass dies in Mobile Safari YES auf dem iPad und NO auf dem iPhone und dem iPod Touch ist.

11
jz-

Ich kenne Android nicht, aber Safari auf dem iPhone oder iPod touch spielt alle Videos aufgrund der geringen Bildschirmgröße im Vollbildmodus ab. Auf dem iPad wird das Video auf der Seite abgespielt, der Benutzer kann es jedoch als Vollbild anzeigen.

9
ughoavgfhw