javascript - 加载我写的轮播视频时谷歌浏览器不显示封面？

Question

我写了一个静态网站，有视频轮播功能，使用了poster属性，但是谷歌浏览器加载时不显示封面，而且加载很慢，但是刷新时封面会闪烁。不会显示。不过在火狐中不会出现这个问题，加载速度也还可以。请问大家这是怎么回事？?

$(function(){
var click=0;
var right=0;      //解决第一次右边点击没反应
$('.video>div:last-child').click(function(){    //当点击左边按钮
for(var i=0; i<5; i++){
document.getElementsByTagName('video')[i].pause();}
click+=1;
if(click>=6)click=1;
right=1;
$('.video li:nth-of-type('+(((click+0)<=5) ? (click+0) : (click+0-5))+')').attr('class','video5');
$('.video li:nth-of-type('+(((click+1)<=5) ? (click+1) : (click+1-5))+')').attr('class','video1');
$('.video li:nth-of-type('+(((click+2)<=5) ? (click+2) : (click+2-5))+')').attr('class','video2');
$('.video li:nth-of-type('+(((click+3)<=5) ? (click+3) : (click+3-5))+')').attr('class','video3');
$('.video li:nth-of-type('+(((click+4)<=5) ? (click+4) : (click+4-5))+')').attr('class','video4');
})
$('.video>div:first-child').click(function(){  //当点击右边按钮
for(var i=0; i<5; i++){
document.getElementsByTagName('video')[i].pause();}
click-=1;
if(click<=0)click=5;
if(!right)click=4;  //解决第一次右边点击没反应
right=1;
$('.video li:nth-of-type('+(((click+0)<=5) ? (click+0) : (click+0-5))+')').attr('class','video5');
$('.video li:nth-of-type('+(((click+1)<=5) ? (click+1) : (click+1-5))+')').attr('class','video1');
$('.video li:nth-of-type('+(((click+2)<=5) ? (click+2) : (click+2-5))+')').attr('class','video2');
$('.video li:nth-of-type('+(((click+3)<=5) ? (click+3) : (click+3-5))+')').attr('class','video3');
$('.video li:nth-of-type('+(((click+4)<=5) ? (click+4) : (click+4-5))+')').attr('class','video4');
})
})
//播放完后

//控制条
function mouseOver1() {
  var video=document.getElementById("v001");
  video.controls=true;
}
function mouseOut1() {
  var video=document.getElementById("v001");
  video.controls=false;
}
function mouseOver2() {
  var video=document.getElementById("v002");
  video.controls=true;
}
function mouseOut2() {
  var video=document.getElementById("v002");
  video.controls=false;
}
function mouseOver3() {
  var video=document.getElementById("v003");
  video.controls=true;
}
function mouseOut3() {
  var video=document.getElementById("v003");
  video.controls=false;
}
function mouseOver4() {
  var video=document.getElementById("v004");
  video.controls=true;
}
function mouseOut4() {
  var video=document.getElementById("v004");
  video.controls=false;
}
function mouseOver5() {
  var video=document.getElementById("v005");
  video.controls=true;
}
function mouseOut5() {
  var video=document.getElementById("v005");
  video.controls=false;
}

.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;}

<div class="Lunbo-video">
              <div class="Lunbo-video-title">
                <h1 class="Lunbo-video-h3 text-center">急救小视频&lt;/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> 

标签： javascripthtmlcss