微信小程序使用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;