tarjeta - Mobile Safari: el elemento de enlace(<a>) sobre el elemento de video no funciona al hacer clic
nvidia drivers (5)
Cambiar el atributo no siempre funciona. He encontrado que cambiar la opacidad del video a 0 funciona, si puedes salirte con la tuya.
mi proyecto actual es un sitio web html que contiene un menú desplegable (javascript / jquery) y un reproductor de video html5 (solo video-tag).
Al hacer clic en una entrada del menú, el submenú desplegable se superpone al contenedor del reproductor de video (el índice z del menú desplegable es mayor que el del reproductor de video). En Safari y Chrome, los enlaces de las entradas del submenú funcionan correctamente al hacer clic, pero en Mobile Safari en iPad no reaccionan. Para reducir el problema, mi ejemplo mínimo incluye un elemento de enlace que se superpone a un elemento de video.
<head>
<style>
a {
position: absolute;
display: block;
z-index: 1;
}
video {
position: absolute;
z-index: 0;
}
</style>
</head>
<body >
<a href="http://www.google.de">click me</a>
<video src="" width="640" height="360" preload="none" controls="controls"></video>
</body>
Tocar el elemento de enlace en un iPad no funciona. ¡Cualquier consejo apreció cómo hacer clic en el enlace en iPad!
Hola, estoy intentando resolver esto con un video incrustado de YouTube que utiliza el método iframe para aplicar esta corrección.
Sin embargo, no puedo cambiar la propiedad de los controles en el elemento de video HTML5 nativo, ya que está en un iFrame en YouTube.
Incluso intenté apuntar al elemento de video en el iFrame, pero esto no está permitido, lo descubrí debido a la política de "mismo dominio" que me impide manipular el contenido del video en el iFrame.
$(document).on(''click'', ''span.close'', function(){
var button = $(this);
var video = button.parent(''.videowrap'');
var iframe = video.find("iframe");
var iframeVideo = iframe.contents().find("video");
console.log(''iframe'', iframe);
console.log(''iframeVideo'', iframeVideo);
console.log(''iframeVideo prop controls'', iframeVideo.prop("controls"));
//http://.com/questions/5261079/mobile-safari-link-a-element-over-video-element-does-not-work-on-click
if (iframeVideo.prop("controls")) {
iframeVideo.prop("controls", false);
iframeVideo.css("opacity", 0);
}
video.remove();
});
Intenté simplemente quitar los controles y luego los agregué de nuevo, pero funciona solo en iPad, en iPhone fue lo mismo. Este es el código que funcionó.
$("#overlay_open").click(function(){
$("video").prop("controls", false);
$("video").css("opacity", 0);
});
$("#overlay_close").click(function(){
$("video").prop("controls", true);
$("video").css("opacity", 1);
});
Su explicación y solución son correctas. Para que alguien interesado en algún código desactive los controles en el menú desplegable:
$(''#menu-dropdown'').click(function() {
if ($("video:visible")) {
if ($("video").prop("controls")) {
$("video").prop("controls", false);
} else {
$("video").prop("controls", true)
}
}
})
¡Espero que esto ayude!
explicación: el reproductor de video html5 absorbe los eventos táctiles si los controles están habilitados.
Fondo: el menú superpone el contenedor de video cuando se despliega, pero no se puede hacer clic en los enlaces de los elementos del menú.
solución: como solución temporal, deshabilito temporalmente los controles eliminando el atributo de video html "controles" con javascript cuando el menú está desplegado, y vuelve a agregar el atributo "controles" cuando el menú se vuelve a soltar.