iPad Safari Handy scheint zu ignorieren Z-Indexierung Position für HTML5 Videoelemente

Question

Ich habe ein Video-Element auf einer Seite, die sowohl in Safari Mobile und Desktop gut funktioniert. Ich habe ein seme-transparent Pull-Down-Menü, das gut funktioniert. Das Problem ist, wenn das Menü über dem Video-Element ist, kann ich auf der Desktop-Safari das Video unter dem Menü (wie gewünscht) sehen, während auf der mobilen Version das Video-Element im Vordergrund bleibt (hässlich), egal was ich erzähle das CSS. Gibt es eine Problemumgehung?

Answer 1

Das Problem tritt nur auf, wenn das Videoelement dynamisch erstellt wurde. Wenn das Element gerade in der Seite war, als es geladen wurde, funktioniert z-index gut.

Sie können den Z-Index an dynamisch erstellten Videos beheben, indem Sie das Videoelement -webkit-transform-style: preserve-3d eingeben.

Ja, es ist so schlimm wie haslayout auf IE!

Answer 2

Leider nicht.

Basierend auf meiner Erfahrung und Verständnis, wie iOS derzeit funktioniert, ist dies nicht möglich.

Mobile Safari auf dem iPad schneidet ein Loch für ein Quicktime-Fenster, das das Video mithilfe der integrierten Hardwarebeschleunigung wiedergibt, um die Akkulaufzeit zu verbessern. (Das iPhone und der iPod Touch öffnen es einfach in einem separaten Fenster, um den gleichen Effekt zu erzielen.)

Dieses Fenster spielt nicht gut mit dem anderen HTML auf der Seite. Tatsächlich habe ich keine Möglichkeit gefunden, mobile Safari dazu zu bringen, etwas über einem Tag anzuzeigen. Meine Vermutung ist, dass dies daran liegt, dass die Hardwarebeschleunigung nur Videoskalierung und -positionierung ermöglicht und dass es nur ein Video gleichzeitig verarbeiten kann.

Answer 3

Ich habe es geschafft, ein Menü div über ein HTML5-Video-Tag in Mobile-Safari auf dem iPad zu platzieren. Um ehrlich zu sein hatte ich keine Probleme und es hat einfach funktioniert. Es könnte sein, weil ich CSS3-Animationen und damit die GPU verwendet habe? Sie könnten versuchen, einen Hack zu verwenden, um der GPU ein Element hinzuzufügen. Wenn Sie -webkit-transform: translateZ(0); auf das Element setzen, sollte es gezwungen werden, die GPU zu verwenden ...

Answer 4

-webkit-transform-style:preserve-3d und -webkit-transform:translateZ(0) hat nicht für mich gearbeitet.

Die Verwendung von Flowplayer mit dem ipad-Plugin und dem Controlbar-Plugin erlaubte mir, die von ipad erstellte Kontrollleiste zu entfernen und durch etwas zu ersetzen, das unter meinen modalen Fenstern z-indexiert werden kann.

Answer 5

Ich lief auch in diese. Das einzige, was ich bekommen konnte, für mich zu arbeiten, war

display:none 

, um das Video-Tag hinzuzufügen, wenn ein div darüber zeigt, die werden musste angeklickt.

Answer 6

Ich benutze Flowplayer und ein einfaches CSS-Dropdown-Menü und hatte das gleiche Problem.

Ich habe Dropdown-Menü, das, wenn angezapft, Teil des Videobereichs abdeckt. Das Untermenü wird wie erwartet über dem Video angezeigt, es wurden jedoch keine Berührungsereignisse gesendet.

ich es behoben, indem ein paar Anregungen von anderen kombiniert diese Frage zu beantworten: set I Sichtbarkeit: ausgeblendet, wenn das Menü und Sichtbarkeit öffnen: sichtbar beim Schließen des Untermenüs, und stellen Sie die - webkit-transform-style: preserve-3d CSS-Eigenschaft auf dem Video.

Hier ist der entsprechende Code. Ich habe das CSS für die Menüleiste weggelassen, aber es tut was man erwartet - was zu einem Menü führt, das Teile des Videos abdeckt.

Menü und Video HTML

<div id='nav'> 
    <ul> 
    ... <!-- bunch of ul/li stuff here for the menu and submenus --> 
    </ul> 
</div> 
<div id='videoplayer'><!-- for flowplayer --></div> 

CSS

video { 
    -webkit-transform-style: preserve-3d; 
} 

Javascript

$(document).ready(function(){ 
    $("#nav li").hover(
    function() { 
     $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300); 
     $("video").css({visibility:"hidden"}); 
    }, 
    function(){ 
     $(this).find('ul:first').css({visibility: "hidden"}); 
     $("video").css({visibility:"visible"}); 
    } 
); 
); 

Answer 7

Sie könnenbehebenan dynamisch erstellten Videos durch Angabe des Videoelements -webkit-transform-style: preserve-3d.

Dies funktionierte für mich mit einem dynamisch erstellten Videoelement. Ich habe auch die z-index des überlegenden Div z-index: 888;, die auch geholfen haben kann.

Answer 8

Ich hatte dieses Problem, das auf mobilen Geräten mit einem Off-Canvas-Menü aufgetreten ist. Wenn das Menü über dem Video war, konnten Sie keinen der Menüpunkte antippen.

Ich reparierte es mein Verschieben des Videos woanders, wenn das Menü eingeschaltet war, indem es absolut bei -100000px positionierte, wenn das Menü nicht angezeigt wurde, stellte es es zurück, relativ positioniert zu werden.

Ich habe mit Display keine funktioniert nicht als wenn Sie es wieder blockieren das Video würde nicht funktionieren.

Ich habe auch versucht, die Höhe auf 0 - das hat nicht funktioniert, da das Video immer noch den Platz zu nehmen schien, obwohl Sie es nicht sehen konnten.

Die endgültige Methode scheint ein bisschen extrem, aber es ist nicht wirklich bemerkbar, wenn es verwendet wird.

Answer 9

Dies ist der Code, der sowohl auf dem iPad als auch auf dem iPhone funktioniert. Ich habe versucht, die Steuerelemente zu entfernen und sie dann wieder hinzuzufügen, aber das funktioniert nur auf dem iPad nicht auf dem iPhone. Nachdem die Deckkraft entfernt und dann wieder hinzugefügt wurde, funktionierte es auch auf dem iPhone.

$("#overlay_open").click(function(){ 
    $("video").prop("controls", false); 
    $("video").css("opacity", 0); 
}); 

$("#overlay_close").click(function(){ 
    $("video").prop("controls", true); 
    $("video").css("opacity", 1); 
}); 

Answer 10

lief gerade in diese Frage heute & eine Lösung aus mehreren Antworten schustern mußten zusammen, da keiner das Problem vollständig behandelt ...

I Videoelemente in einer kollabierten „Tabellenansicht“ Artliste haben, dass wurden Berührungsereignisse auf dem iPhone erfasst, wenn versucht wurde, auf andere Listenelemente zu tippen. Auf dem iPhone würden die Videos abgespielt, wenn andere kollabierte Elemente angetippt werden, die zufällig die gleiche Stelle auf dem Bildschirm einnehmen.

diese Befestigung erforderlich, um alle der folgenden:

1) Mit diesem:

video{ 
    -webkit-transform-style: preserve-3d; 
    } 

... schien keine Wirkung zu haben, aber ich habe es in sowieso. Alles funktioniert jetzt, also will ich nicht weiter damit verschrauben :)

2) Toggling visibility: hidden allein hat nicht funktioniert, und display:none hat nicht wie erwartet funktioniert.

3) Zusätzlich zur "Sichtbarkeit" muss das HTML5-Video-Tag controls Attribut auch dynamisch hinzugefügt/entfernt werden. Entweder:

$("video").css({visibility:"hidden"}).removeAttr("controls"); oder $("video").css({visibility:"visible"}).attr("controls", "controls");

4) Muss gesetzt Sichtbarkeit/Kontrollen auf Dokument Last bezogen auf das ursprüngliche Browser/Bildschirmgröße

5) Obwohl das Hauptanliegen der screwy iPhone Verhalten war, hatte ich auch berücksichtigen Responsive Fenstergröße Änderungen über meinem kleinsten Medienabfrage Haltepunkt von 600px - sonst würden die Videos erscheinen/verschwinden bei den falschen Bildschirmgrößen.

$(window).resize(function(){ 
    if ($(window).width() > 600){ 
     $("video").css({visibility:"visible"}).attr("controls", "controls"); 
    } 
}); 

Durchaus Schmerz um zu arbeiten, was Safari Fehler im Wesentlichen eine dumme Handy ist ... Ich kann es auf dem iPad sicher hoffen funktioniert, wenn ich es später testen ...

Answer 11

Für jedermann mit diesem noch in Probleme laufen Eine andere Lösung, die für mich funktionierte, war, die Optionen im Einbettungscode zu ändern, um Steuerelemente, vorgeschlagene Videos sowie Videotitel und Playeroptionen nicht zuzulassen. Ich habe eine einfache Modernizr.MQ Abfrage die src für Tablet und Handy zu ändern, und enthalten die folgenden zum iframe src für mobile:

rel = 0 & Kontrollen = 0 & show = 0

ich nie vollständig nachgeführt warum das funktioniert, aber ich vermute, dass die Steuerelemente einen User-Agent-Stil haben, der ihnen einen hohen Z-Index gibt und das Element über allem stehen lässt.