移动 Safari：视频元素上的链接 (<a>) 元素在点击时不起作用
Posted
技术标签:
【中文标题】移动 Safari：视频元素上的链接 (<a>) 元素在点击时不起作用【英文标题】：Mobile Safari: link (<a>) element over video element does not work on click 【发布时间】：2011-07-12 18:38:31 【问题描述】：我当前的项目是一个 html 网站，其中包含一个下拉菜单 (javascript/jquery) 和一个 html5 视频播放器（仅限视频标签）。
单击菜单条目时，下拉子菜单会覆盖视频播放器容器（下拉菜单的 z-index 高于视频播放器的 z-index）。在 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="" preload="none" controls="controls"></video>
</body>
在 iPad 上触摸链接元素不起作用。任何建议赞赏如何使链接在 iPad 上可点击！
【问题讨论】：
【参考方案1】：解释： 如果启用了控件，则 html5 视频播放器会吸收触摸事件。
背景： 下拉菜单时会覆盖视频容器，但菜单项链接不可点击。
解决方案： 作为一种解决方法，我通过在下拉菜单时使用 javascript 删除 html 视频属性“控件”来暂时禁用控件，并在再次下拉菜单时重新添加“控件”属性。
【讨论】：
对于 iPad，此解决方案有效。但删除控件属性不会改变 iPhone Safari 上视频对象的行为。它仍然捕获事件。 我在 phonegap 中使用了 Video 标签，我没有controls 属性，但我仍然没有点击注册。有不同的解决方法吗？【参考方案2】：
您的解释和解决方案是正确的。对于一些对禁用菜单下拉控件的代码感兴趣的人：
$('#menu-dropdown').click(function()
if ($("video:visible"))
if ($("video").prop("controls"))
$("video").prop("controls", false);
else
$("video").prop("controls", true)
)
希望这会有所帮助！
【讨论】：
【参考方案3】：更改属性并不总是有效。我发现将视频的不透明度更改为 0 是可行的，如果你能侥幸成功的话。
【讨论】：
你也可以使用可见性：隐藏【参考方案4】：我尝试删除控件然后再次添加它们，但仅适用于 iPad，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);
);
【讨论】：
【参考方案5】：您好，我正在尝试通过使用 iframe 方法应用此修复的 YouTube 视频嵌入来解决此问题。
但是，我无法更改原生 HTML5 视频元素上的控件属性，因为它位于 YouTube 上的 iFrame 中。
我什至尝试定位 iFrame 中的视频元素，但我发现这是不允许的，因为“同域”策略阻止我操纵 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();
);
【讨论】：
以上是关于移动 Safari：视频元素上的链接 (<a>) 元素在点击时不起作用的主要内容，如果未能解决你的问题，请参考以下文章
HTML5 视频标签在移动 Chrome 上的奇怪行为，但适用于 SAFARI