常见问题1（video视频在浏览器中不显示）

<div class="cp_cc">
<div class="gy_sp">
        <div class="vd_bj">
          <img src="展示图片.jpg">
          <div class="b_f"><img src="播放按钮.png"></div>
        </div>
        <div class="video" style="z-index: 0;">
          <video id="myVideo" width="100%" controls="" webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow">
            <source src="video/video3.mp4" type="video/mp4">
          </video>
        </div>
      </div>

<div>

css

.cp_cc .gy_sp{position:relative;}
.cp_cc .gy_sp .vd_bj{position:relative; z-index:9;}
.cp_cc .gy_sp img{width:100%; height:auto; display:block;}
.cp_cc .gy_sp .b_f{width:114px; position:absolute; top:50%; left:50%; margin:-57px 0 0 -57px; cursor:pointer;}
@media only screen and (max-1024px){
.cp_cc{padding:40px 0 88px; background:#000 url(../images/u172.jpg) no-repeat top center / auto 100%;}
.cp_cc .b_t{font-size:26px; line-height:34px; margin-bottom:35px;}
.cp_cc .gy_sp .b_f{width:90px; margin:-45px 0 0 -45px;}
}
@media only screen and (max-992px){
.cp_cc{padding:40px 0; background:#000;}
.cp_cc .b_t{font-size:24px; line-height:30px; margin-bottom:30px;}
.cp_cc .gy_sp .b_f{width:80px; margin:-40px 0 0 -40px;}
}
@media only screen and (max-640px){
.cp_cc{padding:20px 0 40px;}
.cp_cc .b_t{font-size:20px; line-height:26px;}
.cp_cc .gy_sp .b_f{width:60px; margin:-30px 0 0 -30px;}
}

js

  <script type="text/javascript">
    $(document).ready(function(){
    
      var video=document.getElementById("myVideo");
    
      $(".vd_bj .b_f").click(function(){
        video.play();
        $(this).parent(".vd_bj").siblings(".video").css("z-index","99");
      });
    
      video.addEventListener('ended', function () {  
        $(".video").css("z-index","0");
      },false);
    });
  </script>