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‘);
    }
});

移動端video不全屏播放