移动端video不全屏播放

 1 

 2     
 6     
 7     

 8     
 9     
10 

• 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

转载于:https://www.cnblogs.com/Alitar/p/10760485.html