video 适配通屏展示、针对不同分辨率 禁止变形处理

CSS object-fit 属性

 

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

样式上

 video{

  height:100%;

  width:100%

}

 

需求：

  1、视频需要通屏展示，去掉上下黑边 

 

object-fit:cover; fill  需要考虑的，视频比例是否引起拉伸变形，解决如下~~~

 

第一种：通过样式,可以参考获取视频宽高，实际视频宽没问题，缺点：高上下不通

 

<view class="video">
       <video object-fit="" style="height:{{height}}px; width:{{width}}px;"
            src="" 
            bindloadedmetadata="videometa" 
            binderror="videoErrorCallback" 
        ></video>
</view>

　　

videometa:function (e) {
    var that = this;
    //获取系统信息
    wx.getSystemInfo({
      success (res) {
        //视频的高
        var height = e.detail.height;
        
        //视频的宽
        var width = e.detail.width;
 
        //算出视频的比例
        var proportion = height / width;
 
        //res.windowWidth为手机屏幕的宽。
        var windowWidth = res.windowWidth;
 
        //算出当前宽度下高度的数值
        height = proportion * windowWidth;
        that.setData({
          height,
          width:windowWidth
        });
      }
    })
  },

　　

 

第二种方法：动态切换 object-fit:cover  |  contain 属性值

 

监听视频方法： metadata 获取视频宽与高，算出视频的比例  var proportion = height / width;

 

if(proportion  > 1.3){

  type='cover'

}else{

  type='contain'

}

这样大部分视频 都会满足需求，切图参考：根据不同的视频比例使用不同的属性

图1，比例1

 

 

图2：同屏

 

 

 

有更好的方案请留言。。。

 

 

 

 

属性值

值	描述	尝试一下
fill	默认，不保证保持原有的比例，内容拉伸填充整个内容容器。	尝试一下 »
contain	保持原有尺寸比例。内容被缩放。	尝试一下 »
cover	保持原有尺寸比例。但部分内容可能被剪切。	尝试一下 »
none	保留原有元素内容的长度和宽度，也就是说内容不会被重置。	尝试一下 »
scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。	尝试一下 »
initial	设置为默认值，关于 initial
inherit	从该元素的父元素继承属性。 关于 inherit