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