<list @scroll="scrolls" offset-accuracy="10" ref='list' v-if="type=='video'" class="swiper" :style="'height:'+screenHeight+'px;'"
:show-scrollbar='false' :pagingEnabled='true' :scrollable='true' >
<cell ref='cell' v-for="(item, index) in videoList" :key="index" class="swiper-item_cell" :style="{height:screenHeight+'px'}">
<view class="video_wrap" :style="{height:screenHeight+'px'}">
<video object-fit="contain" ref="video1" :loop='true' :id='"video_"+index'
class="swiper-item_video video" :poster="item.poster" :style="{height:screenHeight+'px'}" :src="item.url" :autoplay="false">
</video>
</view>
</cell>
</list>
xianne
- 发布：2021-11-09 17:13
- 更新：2021-12-07 09:48
- 阅读：507
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
手机系统： iOS
手机系统版本号： iOS 13.0
手机厂商： 苹果
手机机型： iphone 11
页面类型： nvue
打包方式： 云端
项目创建方式： CLI
CLI版本号： 3
示例代码：
操作步骤：
<list @scroll="scrolls" offset-accuracy="10" ref='list' v-if="type=='video'" class="swiper" :style="'height:'+screenHeight+'px;'"
:show-scrollbar='false' :pagingEnabled='true' :scrollable='true' >
<cell ref='cell' v-for="(item, index) in videoList" :key="index" class="swiper-item_cell" :style="{height:screenHeight+'px'}">
<view class="video_wrap" :style="{height:screenHeight+'px'}">
<video object-fit="contain" ref="video1" :loop='true' :id='"video_"+index'
class="swiper-item_video video" :poster="item.poster" :style="{height:screenHeight+'px'}" :src="item.url" :autoplay="false">
</video>
</view>
</cell>
</list>
<list @scroll="scrolls" offset-accuracy="10" ref='list' v-if="type=='video'" class="swiper" :style="'height:'+screenHeight+'px;'"
:show-scrollbar='false' :pagingEnabled='true' :scrollable='true' >
<cell ref='cell' v-for="(item, index) in videoList" :key="index" class="swiper-item_cell" :style="{height:screenHeight+'px'}">
<view class="video_wrap" :style="{height:screenHeight+'px'}">
<video object-fit="contain" ref="video1" :loop='true' :id='"video_"+index'
class="swiper-item_video video" :poster="item.poster" :style="{height:screenHeight+'px'}" :src="item.url" :autoplay="false">
</video>
</view>
</cell>
</list>预期结果：
封面和视频播放大小一致
封面和视频播放大小一致
实际结果：
视频封面被拉伸，播放闪动
视频封面被拉伸，播放闪动
bug描述：
video组件object-fit设置为contain，视频封面拉伸变形。
视频封面如图1
视频播放效果如图2
