<div class="m-video">
<video x5-playsinline="" playsinline="" webkit-playsinline="" preload="none" poster="images/img7.jpg">
<source src="video/myvideo.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
<!--自定义默认封面图-->
<div class="bg" style="background-image:url(images/img7.jpg);"></div>
<!--自定义播放按钮-->
<a href="javascript:void(0);" class="btn"></a>
</div>
- x5-playsinline ————————————该属性是让视频内联播放（兼容安卓和x5相关的内核）
- playsinline、webkit-playsinline—————该属性是让视频内联播放
- preload———————————————视频加载时机，none为默认不加载（点击播放时再加载）
- poster————————————————video自带封面图属性
CSS
.m-video video{object-fit: cover;}
object-fit:cover;可以让video的宽高自动撑满父标签的宽高。
JS
$(".m-video .btn").click(function(){
var that=$(this);
var videoBg=that.prev(".bg");
var _video=videoBg.prev("video")[0];
if(_video.paused){
_video.play();
videoBg.hide();
that.addClass('on');
}else{
_video.pause();
videoBg..show();
that.removeClass('on');
}
});
转载链接：https://www.jianshu.com/p/5570c70e89f1