ios - 无法在 iOS 中通过 HTML5 视频与内容交互

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 的特殊情况，它们将只使用 native 播放器控件。我认为这是因为它比让那些以鼠标为中心的控件与 iOS 的怪癖(如触摸和缺乏音量控制)一起工作更简单。因此，您需要查看文档以查看是否有标志强制播放器使用其自己的控件而不是内置控件。