首页 > 谷歌浏览器加载自己写的轮播视频时不显示封面?
头像
牛客519062103号
编辑于 2020-08-20 09:37
+ 关注

谷歌浏览器加载自己写的轮播视频时不显示封面?

我写了一个静态网站,里面有一个视频轮播的功能,并且用了poster属性,但是咋谷歌浏览器加载时不会显示封面,而且加载很慢,不过一刷新就会闪一下封面,之后就不会显示。但是在火狐浏览器就不会出现这样的问题,加载速度也可以。请教一下大家这是怎么回事呢??
<div class="Lunbo-video">
			  <div class="Lunbo-video-title">
			    <h1 class="Lunbo-video-h3 text-center">急救小视频</h1>
			  </div>
			  <div class="Lunbo-video-cont">
			    <div class="video">
			      <div> <img src="images/left.png" class="Lunbobutton"> </div>
			      <div>
			      
			       <ul>
			          <li class="video1"><div><video id="v001" onmouseover="mouseOver1()" onmouseout="mouseOut1()" src="video/zhixi.mp4" preload="auto" poster="images/t1zhixi.png"></video></div> </li>
			          <li class="video2"><div><video id="v002" onmouseover="mouseOver2()" onmouseout="mouseOut2()" src="video/yundao.mp4" preload="auto" poster="images/t2yundao.jpg"></video></div> </li>
			          <li class="video3"><div><video id="v003" onmouseover="mouseOver3()" onmouseout="mouseOut3()" src="video/yundao.mp4" preload="auto" poster="images/t3yundao.png"></video> </div></li>
			          <li class="video4"><div><video id="v004" onmouseover="mouseOver4()" onmouseout="mouseOut4()" src="video/zhixi.mp4" preload="auto" poster="images/t4.png"></video> </div></li>
			          <li class="video5"><div><video id="v005" onmouseover="mouseOver5()" onmouseout="mouseOut5()" src="video/zhixi.mp4" preload="auto" poster="images/t1zhixi.png"></video> </div></li>
			        </ul>
			      </div>
			      <div><img src="images/right.png" class="Lunbobutton"></div>
			    </div>
			  </div>
			</div> 

.Lunbo-video{
	/* background-color:#dc2626; */
	padding-top:0px;
	padding-bottom:50px;
}
.Lunbo-video .Lunbo-video-title{
	margin:20px auto 50px;
}

.Lunbo-video .Lunbo-video-title .Lunbo-video-h1{
	font-size:30px;
	color:#ef7700;
	height:50px;
	line-height:50px;
}
.Lunbo-video .Lunbo-video-title .Lunbo-video-h3{
	font-size:30px;
	color:#ef7700;
	text-align: center;
}
.Lunbo-video .Lunbo-video-cont{
	margin-bottom:50px;
	height: 100%;
}
.Lunbo-video li{
	list-style: none;
}
.video{
	width:80%;
	margin:0 auto;
	overflow: hidden;
	zoom:1;
	border-bottom: 1px solid #e6e6e6;
	 background: #ffffff; 
}
.video>div{
	float: left;
	height: 509px;
}
.video>div:first-child {
	width: 5%;
	display:flex;
	align-items:center;
	justify-content:center;
	/* background: url('image\left.png') center center/cover no-repeat; */
}
.Lunbobutton{
	width: 100%;
	height: auto;
}
.video>div:last-child {
	width: 5%;
	display:flex;
	align-items:center;
	justify-content:center;
	/* background: rgb(240, 13, 114); */
	/* background: url('image\right.png') center center no-repeat; */
}
.video>div:nth-of-type(2){
	width: 90%;
}
.video ul{
	position: relative;
}
.video li{
	transition: all .6s;
	position: absolute;
	background: url(../images/video-bg.png) center center no-repeat;
	background-size: 100% 100%;}
/*.video li>div{padding: 1% 1% 4%;}*/
.video li video{
	width:100%;
	height:100%;
}
.video li h3{
	text-align: center;
	margin-top: 2px;
	color: #1766d7;
}

.video1{
	width:18%;
	height: auto;
	/* top: 143px; */
	left: 0;
	z-index: 1;
	}/*创建5个播放框初始位置*/
.video2{
	width: 37%;
	height: auto;
	/* top: 86px; */
	left: 8%;
	z-index: 2;
}
.video3{
	width: 64%;
	height: auto;
	/* top: 0px; */
	left: 17%;
	z-index: 3;
}
.video4{
	width: 37%;
	height: auto;
	/* top: 86px; */
	left: 54%;
	z-index: 2;
}
.video5{
	width:18%;
	height: auto;
	/* top: 143px; */
	left: 82%;
	z-index: 1;}


全部评论

(0) 回帖
加载中...
话题 回帖

推荐话题

相关热帖

近期精华帖

热门推荐