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.

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.

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.

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

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/

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.

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.