问题
my current project is a html website that contains a dropdown menu (javascript/jquery) and a html5 videoplayer (video-tag only).
When clicking on a menu entry, the dropdown submenu overlays the videoplayer container (z-index of dropdown is higher than of videoplayer). In Safari and Chrome the links of the submenu entries work properly on click, but in Mobile Safari on iPad they do not react. To reduce the problem, my minimal example includes a link element that overlays a video element.
<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>
Touching the link element on an iPad does not work. Any advice appreciated how to make the link clickable on iPad!
回答1:
explanation: the html5 video player absorbs the touch events if controls are enabled.
background: the menu overlayed the video container when dropped down, but the menu item links were not clickable.
solution: as a workaround i temporarily disable the controls by removing the html video attribute "controls" with javascript when the menu is dropped down, and re-add the "controls" attribute when the menu is dropped up again.
回答2:
Your explanation & solution are correct. For someone interested in some code to disable the controls on the menu dropdown:
$('#menu-dropdown').click(function() {
if ($("video:visible")) {
if ($("video").prop("controls")) {
$("video").prop("controls", false);
} else {
$("video").prop("controls", true)
}
}
})
Hope this helps!
回答3:
Changing the attribute doesn't always work. I've found changing the video's opacity to 0 works, if you can get away with it.
回答4:
I tried just removing the controls and then add them again, but works only on iPad, on iPhone was the same thing. This is the code that worked
$("#overlay_open").click(function(){
$("video").prop("controls", false);
$("video").css("opacity", 0);
});
$("#overlay_close").click(function(){
$("video").prop("controls", true);
$("video").css("opacity", 1);
});
回答5:
Hello I am trying to resolve this with a YouTube Video Embed that is using the iframe method to apply this fix.
However I cannot change the controls property on the native HTML5 Video element as it is in an iFrame on YouTube.
I even tried targeting the video element in the iFrame, but this is not allowed I found out due to 'same domain' policy preventing me to manipulate the contents of the video in the 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://stackoverflow.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();
});
来源：https://stackoverflow.com/questions/5261079/mobile-safari-link-a-element-over-video-element-does-not-work-on-click