iPad Safari 忽略 html5 视频上方的 div onclick

Posted 2023-02-19

【中文标题】iPad Safari 忽略 html5 视频上方的 div onclick

【英文标题】：iPad Safari ignores div onclick above html5 video

【发布时间】：2012-01-27 23:38:13

【问题描述】：

我在使 div 元素可点击时遇到问题。我在屏幕上有一个 html5 视频，在视频结束事件之后，我使用 z-index 属性创建了一些位于视频上方的 div 元素。 在录制此 div 时，没有任何反应，但如果此 div 不在视频上方，则一切正常。 有人有解决这个问题的方法吗？

【问题讨论】：

桌面浏览器是否也存在问题？添加 z-index 并不像看起来那么简单：请参阅 developer.mozilla.org/en/Understanding_CSS_z-index

不，桌面浏览器工作正常（IE9、FF9、Chrome 16、Opera 11、Safari 5）。

您找到解决方案了吗？我刚刚击中它。

没有可能的解决方案，您可以通过渲染html来实现。它在ios内部。请在下面按照我的回答。

【参考方案1】：

如果您禁用视频元素上的控件，则它不会窃取您的点击事件。然后，您必须创建自定义控件才能让它发挥作用！

【参考方案2】：

无法在 iPad Safari 上使用位于 HTML5 视频上方的 html 元素，因为视频是通过硬件渲染并显示在浏览器上方的。我发现的唯一解决方法是在上面显示某些内容时隐藏视频，使其可点击。

【参考方案3】：

这是适用于 iPad 和 iPhone 的代码。我尝试删除控件然后再次添加它们，但这仅适用于 iPad 而不是 iPhone。删除不透明度并再次添加后，它也可以在 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);
);