iPad上的HTML5视频分层

Question

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

我已经尝试了 各种各样的解决方案,包括弄乱z-index所有相关元素,都无济于事.有什么我想念的吗？

如果您想亲自尝试一下,请在iPad上访问http://www.cordblood.com,点击(或等待)第二张(或第三张或第四张)幻灯片,点击"观看视频",点击播放(如果你愿意,也可以暂停视频),点击主导航,然后尝试点击子视频显示的其中一个选项.

Answer 1

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

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

我通过结合其他人回答这个问题的一些建议来修复它:我设置可见性:打开菜单时隐藏和可见性:关闭子菜单时可见,并设置-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");

在我的情况下,我已经使用了自定义控制器,所以我不需要它们......但我想(我还没有尝试过)你可以隐藏并在一些用户操作时动态显示它们.