<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>