video显示错位
如下图所示,video显示经常性的错位,蓝色的正方形图片是我设置的poste,它现在上移了,导致露出黑框。
请问以下的结构和样式有问题吗?如何布局才能让原生的video组件显示正常
结构如下:(ps:text元素并没有渲染出来,无需考虑)
<view class="video-component" wx:if="{{!isHideVideo}}" catchtap="{{preventNavToDetail}}"> <view wx:for="{{videos}}" wx:key="unique" wx:for-item="video"> <video src="{{video}}" objectFit="cover" controls poster="{{videoFirstFrame}}"></video> <text wx:if="{{isShowDeleteButton}}" class="ico video-delete" catchtap="{{deleteVideo}}"></text> </view> </view> |
样式如下:
.video-component, .video-component > view { display: inline-block;}.video-component > view { position: relative; display: inline-block; margin-right: 45rpx; width: 360rpx; height: 360rpx;}.video-component > view video { width: 100%; height: 100%;}.video-component .ico.video-delete { display:inline-block; position:absolute; top: 160rpx; right: -70rpx; z-index: 100; width: 40rpx; height: 40rpx; background-position: 0 -476rpx;} |
