Video样式自定义
<style> .js_video_box{width:300px;height:200px;background-color:#666;} .js_video{width: 100%;height:100%;background-size: cover;background-position: center center;} .js_video_start{position:relative;display:block;height:100%;width:100%;top:-200px;} .js_video_start::after{position:absolute;content:'';width: 80px;height: 80px;margin: -40px 0 0 -40px;background: rgba(0, 0, 0, 0.8) url('/content/images/videostart.png') no-repeat center;background-size:40px; border-radius: 10px;top:50%;left:50%;} .js_video_start_hide::after{display:none;} </style> <video class="js_video" src="视频路径" poster="封面路径"></video> <i class="js_video_start"></i> <script type="text/javascript"> $(function () { $(".js_video_start").click(function () { var obj_video = $(this).prev()[0]; if (obj_video.paused) { obj_video.play(); $(".js_video_start").addClass("js_video_start_hide"); } else { obj_video.pause(); $(".js_video_start").removeClass("js_video_start_hide"); } }); }); </script>