小程序video去除上下黑边

方法很简单 ,只需要在video上增加属性

<video objectFit="cover" />

或者

可通过 wxss 设置宽高

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

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

对bindloadedmetadata 绑定事件 videometa

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
        });
      }
    })
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值