Ich schreibe eine Webapp, wo ich ein Video und einige (nicht standardmäßige) Steuerelemente dafür anzeigen muss, die im Overlay erscheinen sollen. Erstellen Sie also einige Divs und positionieren Sie sie über dem Video mit einem höheren Z-Index.
Auf iPhone und iPad scheinen diese Steuerelemente nicht anklickbar zu sein. Ich registriere Aktionen für das Klickereignis, aber das wird nicht ausgelöst, wenn ich auf die Steuerelemente tippe. Ich verstehe, dass ich keine Kontrolle haben kann, während das Video tatsächlich abgespielt wird (es geht sogar in den Vollbildmodus), aber das Problem ist, dass die Steuerelemente auch dann unbrauchbar sind, wenn das Video gestoppt wird.
Ich habe auch versucht, das Attribut controls aus dem Video ohne Wirkung zu entfernen.
Gibt es eine Möglichkeit, Klickereignisse für Elemente zu registrieren, die über einem Video auf dem iPhone / iPad positioniert sind?
Ich hatte das gleiche Problem und habe es funktioniert, indem ich die CSS-Eigenschaft des HTML5-Videoelements während
gesetzt habe pausiert bis -webkit-transform:scale(0.01);
spielt bis -webkit-transform:scale(1);
Das Problem besteht darin, dass das HTML5-Videoelement unter iOS anscheinend die Klickereignisse in den Bereichen (der Elemente, die über dem Layer liegen) entführt, die in der Bounding Box des Videoelements enthalten sind. Wenn die Begrenzungsbox mit der Skalierung (0,01) verkleinert wird oder die Begrenzungsbox mit translateX (-2560px) vom Bildschirm entfernt wird, befinden sich keine Elementbereiche direkt über dem Videoelement und die Klickereignisse werden ausgelöst.
Eine Sache, die man versuchen sollte, ist, dass das Element mit den Steuerelementen das gesamte Video und nicht nur einen Teil davon blockiert - das wird Ihnen auf jeden Fall helfen, es zu debuggen. Ein anderer Ansatz besteht darin, Berührungsereignisse anstelle von Klickereignissen zu verwenden. Diese laufen schneller und werden normalerweise nicht überfahren. Beispielcode wäre hilfreich.
Tags und Links javascript iphone video ipad html5-video