Question

我有Ooyala提供的视频，可以在所有设备上正常播放。当用户在iPad上并尝试通过下拉子窗口查看页面时，会出现此问题。 subnav的每个部分只有ul>li和div隐藏并通过CSS显示。当视频正在播放或暂停时（不是在加载时）并且用户点击主导航（以显示相应的子窗口），子窗口覆盖视频。但是，这些链接都没有响应水龙头。当尝试点击子空间链接时，视频会响应，就好像它被点击一样（显示擦除器）。

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

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

Answer 1

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

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

我通过结合其他人回答this question的一些建议来解决这个问题：打开菜单时我设置了可见性：隐藏 并且可见性：关闭子菜单时，可见 ，并在视频上设置 -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"});
    }
  );
);

Answer 2

我有类似的问题，但解决方案要简单得多。只需要从视频标签中删除controls属性即可。当我使用jwplayer时，视频标签是动态生成的，所以我需要使用js删除属性。用jquery：

$("video").removeAttr("controls");

在我的情况下，我已经使用了自定义控制器，所以我不需要它们......但我想（我还没试过）你可以隐藏并动态显示它们一些用户行动。

iPad上的HTML5视频分层

2 个答案: