CSSobject-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：同屏

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

屬性值