CSS2 video点击中间播放按钮播放视频代码
更新时间:2020-08-26 23:03 已阅读: 次 | 作者:骏马网络 来源:潍坊做网站自定义图片(背景不是poster)。覆盖到视频上,然后点击这个可以 播放。
HTML部分:
<div class="video-box" >
<video id="video" autoplay="autoplay" controls="controls" style="width:100%;">
<source src="http://lkl.pos9.cn/zb_users/theme/songco_v1/style/img/111.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>
文章引用:http://www.wfwz.net/news/241.html如需转载,请注明出处。