移动 Safari：视频元素上的链接 (<a>) 元素在点击时不起作用答案

【问题标题】：Mobile Safari: link (<a>) element over video element does not work on click移动 Safari：视频元素上的链接 (<a>) 元素在点击时不起作用
【发布时间】：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="" width="640" height="360" preload="none" controls="controls"></video>
</body>

在 iPad 上触摸链接元素不起作用。任何建议赞赏如何使链接在 iPad 上可点击！

【问题讨论】：

标签： mobile-safari html5-video

【解决方案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://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();
});

【讨论】：