jquery - 触摸事件不适用于 ipad 上的覆盖 div 的 z-index

Question

我已经使用视频标签显示视频，如果用户暂停视频，我会使用 div 在视频标签顶部显示一些选项，所有点击事件和 z-index 在桌面上的所有浏览器上都能正常工作，但有些我没有即使我已经以编程方式更改了 css 但在 iPad 上没有运气，但 quicktime 播放器和 div z-index 总是自动获得 iPad 的任何解决方案都找不到

$("#video_screen").bind("pause",function(){
        $("#video_screen").css("z-index","-1");
        $("#videoOptionsDiv").show();
        alert("Seek Time:"+$("video").attr("currentTime")+" ms");
        $("#notif").slideDown("fast");
        alert("video "+$("#video_screen").css("z-index"));
        alert("optionaction "+$("#optionActions").css("z-index"));
 }); 

这是我的代码，仅适用于桌面浏览器

Answer 1

这是一个类似的 SO question有人确定移动 safari 为视频标签开了一个洞，不允许在上面呈现任何内容。

Unfortunately not.

Based on my experience and understanding of how iOS currently works, this isn't possible.

Mobile Safari on the iPad cuts a hole for a Quicktime window , which plays back the video using the built in hardware acceleration to improve battery life. (The iPhone and iPod Touch just open it up in a separate window to achieve the same effect.)

This window doesn't play nicely with the other HTML on the page. In fact, I haven't found a way to get mobile Safari to display anything on top of a tag. My guess is that this is because the hardware acceleration only allows for video scaling and positioning, and that it's only able to handle one video at a time.

虽然它有点旧，所以您可以尝试在 div 上设置 9999 z-index 而不是在视频标签上设置 -1 z-index，但这可能不起作用。