前端之家收集整理的这篇文章主要介绍了
css – iPad上的HTML5视频分层，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我有Ooyala服务的视频在所有设备上播放都很好.当用户在iPad上并尝试通过下拉子窗口查看页面时,会出现此问题. subnav的每个部分只不过是ul> li和div隐藏并通过CSS显示.当视频正在播放或暂停时(不是在加载时)并且用户点击主导航(以显示相应的子窗口),子窗口覆盖视频.但是,这些链接都没有响应水龙头.当尝试点击子空间链接时,视频会响应,就好像它被点击一样(显示擦除器).
我已经尝试过solutions sorts sorts,包括搞乱所有相关元素的z-index,都无济于事.有什么我想念的吗？
如果您想亲自尝试一下,请在iPad上转到http://www.cordblood.com,点击(或等待)第二张(或第三张或第四张)幻灯片,点击“观看视频”,点击播放(如果有话,可以暂停视频你也想要,点击一个主导航,然后尝试点击subnav显示的其中一个选项.
最佳答案
我正在使用flowplayer和一个简单的CSS下拉
菜单,并遇到了同样的问题.
我有一个下拉菜单,当点击时,覆盖部分视频区域.子菜单按预期显示在视频上,但未发送任何触摸事件.
我通过结合其他人回答this question的一些建议来修复它：我设置可见性：打开菜单时隐藏和可见性：关闭子菜单时可见,并在视频上设置-webkit-transform-style：preserve-3d CSS属性.
这是相关的代码.我遗漏了菜单栏的CSS,但它可以达到你所期望的效果 – 产生一个覆盖部分视频的菜单.
菜单和视频HTML
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"});
}
);
);
