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>