css - iPad 上的 HTML5 视频分层

Question

我有 Ooyala 提供的视频在所有设备上都能正常播放。当用户使用 iPad 并尝试通过下拉子导航查看页面时，就会出现问题。子导航的每个部分只不过是 ul>li 和一个通过 CSS 隐藏和显示的 div。当视频正在播放或暂停(不是加载时)并且用户点击主导航(以显示相应的子导航)时，子导航会覆盖视频。但是，这些链接都没有响应点击。尝试点击子导航链接时，视频的响应就像被点击一样(显示进度条)。

我试过了all sorts的 solutions ，包括弄乱所有相关元素上的 z-index，但都无济于事。有什么我想念的吗？

如果您想亲自尝试一下，请转至 http://www.cordblood.com在 iPad 上，单击(或等待)第二张(或第三张或第四张)幻灯片，单击“观看视频”，点击播放(如果需要，您也可以暂停视频)，点击主导航，然后尝试点击子导航显示的选项之一。

Answer 1

我正在使用 flowplayer 和一个简单的 CSS 下拉菜单，但遇到了同样的问题。

我有一个下拉菜单，当点击时，它会覆盖部分视频区域。子菜单按预期显示在视频上方，但未发送任何触摸事件。

我通过结合其他人回答 this question 的一些建议来修复它: 我在打开菜单时设置visibility:hidden，在关闭子菜单时设置visibility:visible，并设置-webkit-transform-style:preserve-3d 视频的 CSS 属性。

这是相关代码。我省略了菜单栏的 CSS，但它确实如您所料 - 生成了一个覆盖部分视频的菜单。

菜单和视频 HTML

<div id='nav'>
  <ul>
    ... <!-- bunch of ul/li stuff here for the menu and submenus -->
  </ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>

CSS

video {
  -webkit-transform-style: preserve-3d;
}

Javascript

$(document).ready(function(){
  $("#nav li").hover(
    function() {
      $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
      $("video").css({visibility:"hidden"});
    },
    function(){ 
      $(this).find('ul:first').css({visibility: "hidden"});
      $("video").css({visibility:"visible"});
    }
  );
);