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

Question

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

Answer 1

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

Answer 2

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

Answer 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);
});