ipad safari 上的背景播放器
我正在使用 mediaelement.js jQuery 插件 HTML5 播放器。播放器在页面背景中使用，以便所有菜单都位于播放器上方。这在 Firefox、Chrome、OSX Safari 和 Opera 上完美运行。在 iPad Safari 上，菜单仍然显示在视频上方的 z-indez 位置分层 div 中，但我实际上无法单击菜单。
有什么想法或建议吗？
I'm using the mediaelement.js jQuery plugin HTML5 player. The player is used in the background of the page so that all menus are above the player. This works perfectly on Firefox, Chrome, OSX Safari and Opera. On iPad Safari, the menus still appear above the video in a z-indez position layered div, but I can't actually click on the menus.
Any idea or suggestion?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我和lonchbox有同样的问题。
在移动设备上，我有一个定位点：固定在右下角，它会在单击事件上打开一个 div。在网站的任何区域，点击事件正常工作，但如果我尝试在播放器上方点击它，则点击不起作用。
Pointer-events:none 解决方案并非如此，因为玩家没有捕获错误的点击意图，并且玩家的点击事件工作正常。
我猜这是一个 z-index 问题 - 通过 safari web 检查器进行快速调试，删除播放器 div 使一切正常。但是将位置更改为绝对位置并设置高 z-index（在锚点和玩家 div 上，以及在玩家 div 的父级上）并没有产生任何影响。
I'm having the same problem as lonchbox.
On mobile devices I have a anchor with position:fixed on the bottom right corner, that opens up a div on the click event. On any area of the website the click event works normally, but if I try to click on it while above the player, the click doesn't work.
The pointer-events:none solution is not the case since the player is not capturing the wrong intent of the click, and the click event of the player is working correctly.
I'm guessing it's a z-index problem - on a quick debug via the safari web inspector, deleting the player div makes everything alright. But changing the position to absolute and setting up a high z-index (on both the anchor and the player div, also on the player div's parents) didn't made a difference.
那么您想要单击的显示在媒体元素上方的菜单不起作用？您可以在不希望接收点击的元素上设置一个 CSS 属性，该属性称为指针事件。
因此，对于您的播放器，您可以有这样的规则：
设置该规则后，它不能再接收点击事件。您可能不希望始终应用该规则，因此仅在激活下拉菜单时使用一些 JavaScript 来设置它。
So the menu you want to click on, that shows above the media element doesn't work? There is a CSS property that you can set on the element you don't want receiving clicks, its called pointer-events.
So for your player you could have a rule like this:
when that rule is set, it can no longer receive click events. You probably don't want the rule to apply all the time, so use some javascript to set it only when the dropdown is activated.