1 <div class="m-video"> 2 <video x5-playsinline="" playsinline="" webkit-playsinline="" preload="none" poster="images/img7.jpg"> 3 <source src="video/myvideo.mp4" type="video/mp4"> 4 您的浏览器不支持 video 标签。 5 </video> 6 <!--自定义默认封面图--> 7 <div class="bg" style="background-image:url(images/img7.jpg);"></div> 8 <!--自定义播放按钮--> 9 <a href="javascript:void(0);" class="btn"></a> 10 </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