iPad上的HTML5视频分层

Question

我有Ooyala提供的视频，在所有设备上都能播放。当用户在iPad上并试图通过下拉子菜单查看页面时，就会出现问题。subgov的每个部分只不过是通过CSS隐藏和显示的ul>li和div。当视频正在播放或暂停（不是在加载时），并且用户点击主导航（以显示相应的子导航）时，子导航覆盖视频。但是，这些链接都没有响应抽头。当试图点击sub-v链接时，视频的响应就像被点击一样（显示洗涤器）。

我尝试过各种各样的解决方案，包括在所有相关元素上扰乱z-index，但都无济于事。我有什么东西不见了吗？

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

Answer 1

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

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

我结合了其他回答这个问题的人的一些建议来解决这个问题：我在打开菜单时设置了可见性：hidden，在关闭子菜单时设置能见度：可见，并在视频上设置-webkit转换样式：>preserve-3d[/strong>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

我也遇到过类似的问题，但解决方案要简单得多。只需要从视频标签中删除控件属性。由于我使用的是jwplayer，视频标签是动态生成的，所以我需要使用js删除该属性。使用jquery：

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

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