jir*_*iki 17 mobile-safari html5-video
我目前的项目是一个html网站,其中包含一个下拉菜单(javascript/jquery)和一个html5视频播放器(仅限视频标签).
单击菜单条目时,下拉子菜单将覆盖videoplayer容器(下拉列表的z-index高于videoplayer).在Safari和Chrome中,子菜单条目的链接在点击时可以正常工作,但在iPad上的Mobile Safari中他们没有反应.为了减少这个问题,我的最小示例包括一个覆盖视频元素的链接元素.
<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上的链接元素不起作用.任何建议都赞赏如何在iPad上点击链接!
jir*_*iki 19
解释:如果启用了控件,html5视频播放器会吸收触摸事件.
background:菜单在下拉时覆盖了视频容器,但菜单项链接无法点击.
解决方案:作为一种解决方法,我通过在菜单下拉时使用javascript删除html视频属性"controls"来暂时禁用控件,并在菜单再次被删除时重新添加"controls"属性.
小智 6
您的解释和解决方案是正确的.对于某些代码感兴趣的人来禁用菜单下拉菜单上的控件:
$('#menu-dropdown').click(function() {
if ($("video:visible")) {
if ($("video").prop("controls")) {
$("video").prop("controls", false);
} else {
$("video").prop("controls", true)
}
}
})
希望这可以帮助!
| 归档时间： |
|
| 查看次数： |
9092 次 |
| 最近记录： |