iPad Safari mobile semble ignorer la position d'indexation z pour les éléments vidéo html5
J'ai un élément vidéo sur une page qui fonctionne bien, à la fois dans Safari Mobile et sur votre ordinateur de bureau ..__ J'ai un menu déroulant semi-transparent qui fonctionne bien. Le problème est que, lorsque le menu est au-dessus de l'élément vidéo, sur le bureau Safari, je peux voir la vidéo sous le menu (comme vous le souhaitez), tandis que sur la version mobile, l'élément vidéo reste au premier plan (moche), peu importe ce que je dis. le css. Y a-t-il une solution de contournement?
Le problème ne se produit que si l'élément vidéo a été créé de manière dynamique. Si l'élément était juste dans la page lors de son chargement, z-index fonctionne correctement.
Vous pouvez corriger z-index sur des vidéos créées dynamiquement en donnant à l'élément video -webkit-transform-style: preserve-3d.
Oui, c'est aussi mauvais que haslayout sur IE!
Malheureusement non.
Sur la base de mon expérience et de ma compréhension du fonctionnement actuel d’iOS, cela n’est pas possible.
Mobile Safari sur iPad coupe une fenêtre pour Quicktime, qui lit la vidéo en utilisant l'accélération matérielle intégrée pour améliorer la durée de vie de la batterie. (L'iPhone et l'iPod Touch l'ouvrent simplement dans une fenêtre séparée pour obtenir le même effet.)
Cette fenêtre ne fonctionne pas bien avec l'autre HTML de la page. En fait, je n'ai pas trouvé le moyen de faire en sorte que Safari pour mobile affiche quoi que ce soit au-dessus d'un tag. Mon hypothèse est que cela est dû au fait que l'accélération matérielle ne permet que le redimensionnement et le positionnement de la vidéo et qu'elle ne peut gérer qu'une vidéo à la fois.
J'utilise flowplayer et un simple menu déroulant CSS et j'ai eu le même problème.
J'ai un menu déroulant qui, lorsqu'il est tapé, couvre une partie de la zone vidéo. Le sous-menu apparaît sur la vidéo comme prévu, mais aucun événement tactile n'a été envoyé.
Je l'ai corrigé en combinant quelques suggestions d'autres personnes répondant à cette question: Je règle Visibilité: masquélors de l'ouverture du menu et Visibilité: visiblelors de la fermeture du sous-menu, ET définissez la propriété -webkit-transform-style: preserve-3dCSS sur la vidéo.
Voici le code pertinent. J'ai omis le CSS pour la barre de menu, mais il fait ce que vous pouvez attendre - en créant un menu qui couvre des parties de la vidéo.
menu et vidéo 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"});
}
);
);
J'ai réussi à placer un div de menu sur une balise vidéo html5 dans mobile-safari sur l'ipad. Pour être honnête, je n’ai eu aucun problème et cela a fonctionné. Cela pourrait être parce que j'utilisais des animations CSS3 et donc le GPU? Vous pouvez utiliser un hack pour ajouter un élément au GPU. Si vous mettez -webkit-transform: translateZ(0); sur l'élément, il devrait le forcer à utiliser le GPU ...
Vous pouvez corriger z-index sur des vidéos créées dynamiquement en donnant à l'élément video -webkit-transform-style: preserve-3d.
Cela a fonctionné pour moi avec un élément vidéo créé dynamiquement. J'ai également défini le z-index de la div en superposition sur z-index: 888;, ce qui a peut-être aussi aidé.
J'ai couru dans cela aussi. La seule chose que je pouvais travailler pour moi était d’ajouter
display:none
à la balise video lors de l'affichage d'une div sur laquelle il fallait cliquer.
-webkit-transform-style:preserve-3d et -webkit-transform:translateZ(0) n'ont pas fonctionné pour moi.
Utiliser Flowplayer avec le plugin ipad et le plugin controlbar m'a permis de supprimer la barre de contrôle créée par ipad et de la remplacer par quelque chose qui peut être indexé en z sous mes fenêtres modales.
J'ai eu ce problème qui se produisait sur les appareils mobiles avec un menu en mode hors connexion. Lorsque le menu était terminé dans la vidéo, vous ne pouviez appuyer sur aucun des éléments de menu.
Je l'ai corrigée en déplaçant la vidéo ailleurs lorsque le menu était allumé, en la positionnant absolument à -100000px lorsque le menu n'était pas affiché, cela la remettait en position relative.
J'ai trouvé que l'utilisation de l'affichage ne fonctionnait pas, mais la vidéo ne fonctionnerait pas.
J'ai également essayé de régler la hauteur à 0 - cela ne fonctionnait pas car la vidéo semblait toujours occuper l'espace, même si vous ne pouviez pas la voir.
La méthode finale semble un peu extrême mais elle n’est pas vraiment perceptible lorsqu’elle est utilisée.
Je viens de rencontrer ce problème aujourd'hui et je devais trouver une solution à partir de plusieurs réponses, car aucune ne traitait complètement le problème ...
Dans la liste de styles "Vue sous forme de tableau" réduite, des éléments vidéo capturant des événements tactiles sur un iPhone lors de la tentative de toucher d'autres éléments de la liste. Sur iPhone, les vidéos étaient lues lorsque vous tapotiez sur d'autres éléments réduits qui occupaient le même emplacement à l'écran.
Pour résoudre ce problème, il fallait:
1) En utilisant ceci:
video{
-webkit-transform-style: preserve-3d;
}
... ne semble pas avoir d'effet, mais je l'ai laissé de toute façon. Tout fonctionne maintenant, donc je ne veux pas y aller plus loin :)
2) Le basculement de visibility: hidden seul n'a pas fonctionné et display:none n'a pas fonctionné comme prévu.
3) En plus de la "visibilité", l'attribut controls de la balise vidéo HTML5 doit également être ajouté/supprimé de manière dynamique. Non plus:
$("video").css({visibility:"hidden"}).removeAttr("controls"); ou $("video").css({visibility:"visible"}).attr("controls", "controls");
4) Doit définir la visibilité/les contrôles sur le chargement de document en fonction de la taille initiale du navigateur/de l'écran
5) Bien que la préoccupation principale fût le comportement délirant de l'iPhone, je devais également prendre en compte les modifications de la taille de la fenêtre au-dessus de mon point d'arrêt de requête multimédia de 600 pixels - sinon les vidéos apparaissaient/disparaissaient avec une taille d'écran incorrecte.
$(window).resize(function(){
if ($(window).width() > 600){
$("video").css({visibility:"visible"}).attr("controls", "controls");
}
});
Il est très pénible de contourner ce qui est essentiellement un stupide bogue Safari pour mobile ... J'espère que cela fonctionnera sur iPad lorsque je le testerai plus tard ...
Pour ceux qui rencontraient encore des problèmes avec ce problème, un autre correctif qui fonctionnait pour moi consistait à modifier les options du code d'intégration afin de ne pas autoriser les contrôles, les vidéos suggérées, ainsi que les options de titre et de lecteur vidéo. J'ai ajouté une simple requête Modernizr.MQ pour modifier le code src pour les tablettes et les appareils mobiles, et j'ai ajouté ce qui suit au code iframe pour mobile:
? rel = 0 & controls = 0 & showinfo = 0
Je n'ai jamais complètement compris pourquoi cela fonctionne, mais je suppose que les contrôles ont un style d'agent utilisateur qui leur donne un indice z élevé et place l'élément au-dessus de tout.
C'est le code qui fonctionnera à la fois sur l'iPad et l'iPhone. J'ai essayé de supprimer les commandes, puis de les rajouter, mais cela ne fonctionnait que sur iPad, pas sur iPhone. Après avoir retiré l'opacité, puis rajouté, cela fonctionnait également sur 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);
});