Question

我已经获得了一个设计实现，其中有一个灯箱，其中包含一些内容，其中包含链接。这一切都很好并且正常工作，除非它涉及iOS，如果它的位置碰巧位于视频之上，则无法与灯箱内容进行交互。

它的表现就好像视频位于灯箱内容之上 - 即使它落后了。即使使用非常简单的准系统HTML也会出现问题。

剥离HTML：

<video id="home_video" controls preload="none" poster="http://www.videojs.com/img/poster.jpg" width="500">
  <!-- video sources -->
</video>

<!-- positioned over the video -->
<div id="lightbox">
  <a href="#" id="not-touchable">Not touchable on iOS</a>
  <a href="#" id="touchable">Touchable because it's not over a video</a>
</div>

相关的剥离式造型：

#lightbox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.5);
}
#lightbox > a {
  display: inline-block;
  background: red;
  padding: 20px;
}
#touchable {
  margin-top: 400px; /* taller than video */
}

我已经整理了一个 jsfiddle example 。它包括一些JS alert，当您成功点击/触摸链接时。在桌面浏览器上，可以单击这两个链接，在iOS上只能点击第二个链接。

值得注意的是，无论灯箱是在页面上预先打开，还是在this jsfiddle

中明确打开之后，都会出现问题

我可以想出一些解决问题的方法 - 比如将视频移出屏幕，用海报图片替换它，或者用transforming the video using translateX隐藏它，但我更喜欢如果可能的话，将视频留在原处。

之前是否有人偶然发现了这个问题并找到了解决方案？有什么指针吗？

Answer 1

这是Mobile Safari的一个怪癖，它拦截视频元素顶部元素的所有触摸/点击事件，无论z-index或DOM顺序如何，仅当controls属性为集。

因此，解决方案是删除controls属性并使用Javascript实现您自己的自定义控件。您可以使用现有的开源播放器为您提供这些控件（例如jPlayer，videojs等），但您需要小心，因为其中一些有iOS的特殊情况，他们只使用本机播放器控件。我认为这是因为它比使这些以鼠标为中心的控件更适合iOS的怪癖（如触摸和缺乏音量控制）。因此，您需要检查文档以查看是否有标志强制播放器使用自己的控件而不是内置控件。

无法通过iOS中的HTML5视频与内容进行互动

1 个答案: