我写了一个静态网站,里面有一个视频轮播的功能,并且用了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) 回帖