尝试了很多种方法如下:
1、用其余两个属性会吧小视频拉大,所以只能采用contain这个属性,但是这个属性在会有黑边,反复尝试发现只有在加了tarbar情况下是没有黑边的,加了tarbar情况下用contain这个属性是有黑边的,也用自定义的tarbar尝试了,也是有黑边,只要不加tarbar就灭有这个问题,真机情况下跟开发工具一样都有这个问题,请求大家帮助下,这问题怎么解决呢?谢谢啦
<video style="padding-top:{{bar_Height + 45}}px;" src='{{src}}' style='border:none' object-fit="contain" controls='{{false}}' loop autoplay bindtouchstart="touchStart" bindtouchend="touchEnd" style="width:{{windowWidth}}px;height:{{windowHeight}}px">
video{position: relative;top: 0rpx;left:0px;object-fit: contain;margin: 0;padding: 0;display: block}
这是加了tarbar的情况下有黑边
这是没有加tarbar的情况下没有黑边
获取视频宽度,计算出显示宽高度 WXML: <video style="{{videoH}}" src="{{imgUrls.video}}" object-fit="contain" controls bindloadedmetadata="videoload" ></video> JS: videoload(e){ let that=this let W=wx.getStorageSync('sysW') let videoW=e.detail.width let videoH=e.detail.height let rate=W/videoW videoH=videoH*rate that.setData({ videoH:'height:'+videoH+'px;' }) },
contain属性 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。
但是用手机拍的也是不可以的都是存在黑边,而且呢不加tarbar的情况下,视频是不存在黑边的,加了就存在黑边了,这是怎么回事呢?
https://developers.weixin.qq.com/s/IsaAOMmS7x85
这是代码片段
而且用这个contain属性在ios下是不沾满全屏的,用这两个属性fill,cover真机情况下是占满全屏了但是正方形的小视频就会被拉变形,所以这个问题改怎么处理呢???
这个是用cover属性来的,都特别合适,就是视频是正方形的情况下视频变形了,不能保证视频正常出现。
cover属性跟fill都是这样子的情况,麻烦官方尽快看下,急急急
这是片段代码https://developers.weixin.qq.com/s/VqdZiMmc7q8L
这个是正常的预期表现呀,主要是看你视频的宽高比与容器的宽高比是否一致,不一致的情况下你需要的显示效果是什么来选择object-fit
着急,请求大家帮忙看看吧
楼主解决了吗?同款问题
没解决,官方也不讲话了,哎
实在找不到解决办法
你好,这个可以了解一下object-fit的取值:https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
没有解决,官方也不解决下,服了