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
来源:oschina
链接:https://my.oschina.net/u/4273739/blog/3562320