Ich möchte ein HTML5-Video auf dem iPhone abspielen, aber wenn ich es versuche, erscheint das iPhone automatisch im Vollbildmodus, wenn das Video ".play ()" aufgerufen wird. Wie spiele ich das Video inline ab, ohne dass das iPhone die Benutzeroberfläche wie folgt ändert:
Ссылка (Wenn Sie auf "Start the 360 experience" klicken)
Bearbeiten: Hier ist mein Code:
%Vor%Ich arbeite an einer Lösung, bis Apple die "webkit-playsinline" tatsächlich inline spielen lässt.
Ich habe hier eine Bibliothek gestartet: Ссылка
Es ist sehr grob, aber das Wesentliche ist, dass du das Video "suchst", anstatt es direkt zu spielen. Also anstatt anzurufen:
%Vor%Sie setzen stattdessen eine Schleife mit dem Anfrageranimationsrahmen oder setInterval und stellen dann Folgendes ein:
%Vor%So könnte die ganze Sache in Ihrem html aussehen:
%Vor%und Ihre js (stellen Sie sicher, jquery einzuschließen)
%Vor%Der eigentliche Treiber für Apple, der dies ändert, ist die aktuelle Version von webGL für iOS-Geräte, die standardmäßig aktiviert ist. Im Grunde wird es eine ganze Reihe von Leuten geben, die nach Videotexturen suchen. technisch gerade jetzt, das kann nicht gemacht werden.
Entschuldigung dafür, dass ich dies als Antwort geschrieben habe statt als Kommentar zum Hauptthread, aber ich habe anscheinend nicht genügend Reputationspunkte, um einen Kommentar abzugeben!
Wie auch immer, ich möchte auch genau das gleiche machen wie das OP.
Ich habe bemerkt, dass es eine bestimmte Bibliothek gibt, krpano , die mit krpano videoplayer plugin , mit dem Video auf dem iPhone INLINE abgespielt werden kann! Einige Demos in Aktion finden Sie hier: Ссылка
Obwohl ich ein einfaches 2D-Video-Beispiel über diesen verrückten Panorama-Videos bevorzugen würde, ist dies das nächste, das ich beim Durchforsten des Webs gefunden habe. Soweit ich das beurteilen kann, verwenden sie ein normales Element, das nicht an das Dokument angehängt ist:
%Vor%Videoelement vor dem Entfernen:
%Vor%Aber das allein scheint nicht genug zu sein: Wenn das Video abgespielt wird, läuft es immer noch im Vollbildmodus.
Wie verhindern sie, dass das Video in den Vollbildmodus wechselt?
EDIT: Nachdem wir uns beide Beispiele angesehen hatten, sah es so aus, als ob beide das canvas-Element zum Rendern des Videos nutzen würden. Also habe ich eine Demo gemacht, die das Video-Rendering durch das Canvas-Element zeigt. Während das Demo gut funktioniert, liefert es nicht auf dem iPhone aus (selbst wenn das Videoelement vollständig aus dem DOM entfernt wurde!) - das Video springt immer noch auf den Vollbildmodus. Ich denke, der nächste Schritt wäre, die gleichen Prinzipien auf eine WebGL-Leinwand anzuwenden (das ist es, was die krpano-Beispiele tun), aber vielleicht wird diese Demo in der Zwischenzeit einige Ideen in anderen hervorrufen ...
Tags und Links user-interface iphone html5 video