上传视频等,默认为黑色,无法用视频的第一帧作为封面,以及视频的video为原生组件,层级很高无法覆盖问题,虽然有cover-view,但很多场景还是不灵活,
方法:

视频组件video

 <video :src="item.url" :poster="" controls :show-center-play-btn="false" auto-pause-if-navigate></video>

重点
将video组件更换为image组件,地址仍写video的地址,在地址后面加上

'?x-oss-process=video/snapshot,t_0,f_jpg'

!!!下方代码的item就是地址(地址全称)

<image :disabled="false" :controls='false' :autoplay='false' :src="item+'?x-oss-process=video/snapshot,t_0,f_jpg'" mode=""></image>

因uniapp 的 image组件不是原生的,故不存在无法覆盖的问题,完美解决

贴上uniapp的插件地址:视频第一帧及上传组件

效果:(播放需自行写代码,插件有完整组件代码,详细请自行下载插件查看):

上传组件,uniapp获取视频第一帧展示,及视频的层级问题

在这里插入图片描述
就搞定了,亲测有效 好用!!,有用请给点个赞~~~

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐