iPad HTML5视频上的文本覆盖中的jQuery隐藏问题答案

【问题标题】：jQuery hide issue in text overlay on iPad HTML5 videoiPad HTML5视频上的文本覆盖中的jQuery隐藏问题
【发布时间】：2011-05-04 10:46:23
【问题描述】：

以下代码在每个 HTML 5 平台上都能完美运行……除了 iPad。我只想通过简单地单击视频本身顶部显示的 div 来“关闭”视频。如果您对如何解决这个问题有一个想法，即使没有 jQuery，它也会有很大帮助。谢谢。

$(function(){
  $("#Xmovie1").tap(function(event){
    $("#Menu1Mov").hide();
    $("#Home").fadeIn('slow');
  });
});

<div id = "Home" class="imgHome"><img id = "img1" src ="" alt="home"/>
  <div id = "Menu1Lib" class="cMenu1Lib"></div>
  <div id = "Menu2Lib" class="cMenu2Lib"></div>
</div>
<div id = "Menu1Mov" class="cMenu1Mov" >
  <video id="Menu1Movie" src = "mov.mp4" width="980" height="495" poster = "../medias/img/interface/Poster.jpg" controls></video>
  <div id = "Xmovie1" class = "cXmovie1">x</div>
</div>

【问题讨论】：

标签： jquery ipad html html5-video

【解决方案1】：

您是否测试过点击“x”时是否会触发整个事件？我的意思是这是 $("#Menu1Mov").hide() 中的问题还是 XMovie1 div 元素的位置错误。

如果事件触发，您可以尝试，而不是简写：$("#Menu1Mov").css("display", "none") 和 #Menu1Movie 相同。

如果事件甚至没有触发（不知道为什么会这样，但只是肯定的），那么您应该尝试为#Xmovie1 重新声明 CSS，确保将其置于首位，例如。位置：绝对 + z-index。

【讨论】：

感谢您的帮助。好点子。事件根本不会触发，但 z-index 并不能解决问题。正如我之前所说，它适用于 Firefox chrome 甚至 ie9。它不适用于 iPad (iOs 4.3)。
更新：如果我去掉视频元素中的“控件”属性，它就可以工作。坏消息，如果这意味着我必须建立自己的控件。真的没有时间这样做。
在处理iPad时不能通过绝对定位来移动视频元素的“x”吗？
是的，这可能是解决问题的一种方法，将 X 移到视频“帧”之外，然后就可以了……但我不能这样做，因为视频需要我所有的可用空间。

【解决方案2】：

只是为了补充我的经验。我有同样的问题，一个带有一些标签的 div。单击 div 标签必须切换。在浏览器上它工作正常，但在 ipad 上标签不会隐藏。

我将标签的位置更改为绝对位置并放置一个 z-index，然后它就开始工作了。

【讨论】：