Mobile Safari:视频元素上的链接(<a>)元素在点击时不起作用
Mobile Safari:视频元素上的链接(<a>)元素在点击时不起作用
提问于 2011-03-10 22:30:09
我当前的项目是一个包含下拉菜单(javascript/jquery)和html5视频播放器(仅限视频标签)的html网站。
单击菜单项时，下拉子菜单会覆盖videoplayer容器(下拉菜单的z索引高于videoplayer的z索引)。在Safari和Chrome中，子菜单项的链接在点击时可以正常工作，但在iPad上的Mobile Safari中，它们不会做出反应。为了减少这个问题，我的最小示例包括一个覆盖视频元素的link元素。
<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> 触摸iPad上的link元素不起作用。任何建议都很欣赏如何使链接在iPad上可点击！
回答 5
Stack Overflow用户
发布于 2011-06-08 21:13:02
说明:如果启用了控件，html5视频播放器会吸收触摸事件。
背景:菜单在下拉时覆盖了视频容器，但菜单项链接不可点击。
解决方法:作为一种变通办法，当菜单被下拉时，我使用javascript删除html视频属性" controls“，并在菜单再次弹出时重新添加"controls”属性，从而暂时禁用控件。
Stack Overflow用户
发布于 2013-03-20 01:57:21
你的解释和解决方案是正确的。对于对禁用菜单下拉菜单上的控件的代码感兴趣的人：
$('#menu-dropdown').click(function() {
if ($("video:visible")) {
if ($("video").prop("controls")) {
$("video").prop("controls", false);
} else {
$("video").prop("controls", true)
}
}
})希望这能有所帮助！
Stack Overflow用户
发布于 2012-03-02 22:37:42
更改属性并不总是有效的。我发现把视频的不透明度改成0是可行的，如果你能做到的话。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5261079
复制相关文章
相似问题