移动端video不全屏播放

移动端开发过程中，有的时候会遇到video播放（不让全屏播放），但是浏览器默认都是点击自动全屏去播放。下面看解决方法：

 

HTML

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

从上述代码中可以看到video标签上多了几个属性：

1. x5-playsinline ————————————该属性是让视频内联播放（兼容安卓和x5相关的内核）
2. playsinline、webkit-playsinline—————该属性是让视频内联播放
3. preload———————————————视频加载时机，none为默认不加载（点击播放时再加载）
4. poster————————————————video自带封面图属性
5. 微信端建议加一个x5-video-player-type="h5-page"属性

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