自定义图片(背景不是poster)。覆盖到视频上,然后点击这个可以 播放。
HTML部分
<div class="video-box" > <video id="video" autoplay="autoplay" controls="controls" style="width:100%;height:510px"> <source src="test.mp4" type="video/ogg"> <source src="test.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div class="video-img"></div> </div>
CSS部分
.video-box{ position: relative; } .video-box video{ display: inline-block; vertical-align: baseline; } .video-box .video-img{ position: absolute; top: 0; bottom: 0; width: 100%; z-index: 999; background: url(/web/pic/v.jpg) no-repeat; background-size: 100% 100%; cursor:pointer }
JS控制部分
<script type="text/javascript"> $(".video-img").click(function(){ $(this).hide(); $("#video")[0].play(); }) </script>
作者:百秀,转载请注明。