微信小程序 video 视频组件 有黑框 去除上下边距黑框

微信小程序使用video组件来播放视频，会有上下的黑色边框，以下解决办法。

`video’默认宽度 300px、高度 225px，可通过 wxss 设置宽高。这句话是微信的文档中的，由此得知，有黑框的原因是视频的比例不同。那么解决的办法就是根据视频的实际比例来定义宽高。代码如下。

wxml:

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

bindloadedmetadata:视频元素加载完成时触发。

对bindloadedmetadata 绑定事件 videometa

js:

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

 

网上有很多文章都没有实际解决办法，有的说让后台返回像素。

但我觉得这样比较好用。希望对大家有帮助吧。

大家有好的意见或办法可以和我交流下。

end;