ipad safari 上的后台播放器答案

【问题标题】：background player on ipad safariipad safari 上的后台播放器
【发布时间】：2012-11-12 08:18:45
【问题描述】：

我正在使用 mediaelement.js jQuery 插件 HTML5 播放器。播放器在页面背景中使用，因此所有菜单都位于播放器上方。这在 Firefox、Chrome、OSX Safari 和 Opera 上完美运行。在 iPad Safari 上，菜单仍然出现在视频上方的 z-indez 位置分层 div 中，但我实际上无法点击菜单。

有什么想法或建议吗？

【问题讨论】：

我澄清了你的问题，因为措辞令人困惑。希望我仍然捕捉到您的情况和问题。如果您有任何进一步的细节或更正，请再次编辑。

标签： iphone ipad mobile-safari z-index mediaelement.js

【解决方案1】：

我遇到了和 lonchbox 一样的问题。在移动设备上，我在右下角有一个 position:fixed 的锚点，它在点击事件上打开了一个 div。在网站的任何区域，点击事件正常工作，但如果我尝试在播放器上方点击它，点击不起作用。

pointer-events:none 解决方案不是这种情况，因为播放器没有捕捉到错误的点击意图，并且播放器的点击事件正常工作。

我猜这是 z-index 问题 - 在通过 safari 网络检查器进行快速调试时，删除播放器 div 后一切正常。但是将位置更改为绝对位置并设置高 z-index（在锚点和播放器 div 上，也在播放器 div 的父级上）并没有什么不同。

【讨论】：

【解决方案2】：

所以你想点击的菜单，显示在媒体元素上方的菜单不起作用？您可以在不希望收到点击的元素上设置一个 CSS 属性，称为指针事件。

所以对于你的播放器，你可以有这样的规则：

.thePlayer {
    ponter-events:none;
}

设置该规则后，它将不再接收点击事件。您可能不希望该规则一直应用，因此仅在激活下拉菜单时使用一些 javascript 来设置它。

【讨论】：