video层级问题

video层级问题

video在播放的时候层级往往是最高的，此现象一般在移动端uc浏览器展现出来

最近一直遇到video层级这个问题，看了很多博客很多文章，但是收获却不是很多，网上现在基本上给的都是隐藏掉display：none;
我最后也是妥协了毕竟解决不了，找不到更好的办法了，
直接看代码吧

下面是HTML代码：

<div class="ivideo">
		<div class="con">
				<video class="video_item" src="{$vo.video}" controls="controls" x5-playsinline=""  playsinline="true"  webkit-playsinline="true"  x-webkit-airplay="true"  x5-video-player-type="h5"  x5-video-player-fullscreen=""  x5-video-orientation="portraint" playsinline webkit-playsinline="true" x-webkit-airplay="allow" oncontextmenu="return false;">
						<source src="{$vo.video}" id="video">
						<source src="{$vo.video}" type="video/webm">
				</video>
		</div>
		<div class="txt">{$vo.title}</div>
</div>

下面是js代码 （我用的jquery）：
$(function (){
$(’#openlc’).on(‘click’, function (e){ //导航栏按钮点击
$(’.video_item’).each(function (){ //视频class
// $(’.con’).css(‘backgroundColor’,’#000’);
var h = $(this).height(); //获取视频高度
$(this).trigger(‘pause’); //暂停播放视频
$(this).toggle(0); //隐藏视频
$(this).parent().css({‘height’: h}); //复制给父级高度
});
});
});

这是我在网站有下拉菜单时的解决方法，我看了一下爱奇艺的解决方法是直接display：none; 他们的解决方法有个问题 当block的时是没有视频影像的 必须得刷新，

欢迎关注公众号

可以参照这个网站
http://chnki.028search.com/index.php?a=lists&catid=14

此文章为原创，转发请联系博主！！！