我有 Ooyala 提供的视频在所有设备上都能正常播放。当用户使用 iPad 并尝试通过下拉子导航查看页面时,就会出现问题。子导航的每个部分只不过是 ul>li
和一个通过 CSS 隐藏和显示的 div
。当视频正在播放或暂停(不是加载时)并且用户点击主导航(以显示相应的子导航)时,子导航会覆盖视频。但是,这些链接都没有响应点击。尝试点击子导航链接时,视频的响应就像被点击一样(显示进度条)。
我试过了all sorts的 solutions ,包括弄乱所有相关元素上的 z-index
,但都无济于事。有什么我想念的吗?
如果您想亲自尝试一下,请转至 http://www.cordblood.com在 iPad 上,单击(或等待)第二张(或第三张或第四张)幻灯片,单击“观看视频”,点击播放(如果需要,您也可以暂停视频),点击主导航,然后尝试点击子导航显示的选项之一。
最佳答案
我正在使用 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"});
}
);
);
关于css - iPad 上的 HTML5 视频分层,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9951463/