<video :src="imgUrl" v-if="baseSetting.thumbType === '2'" style="width: 100%; height: 100%;" />
z***@163.com
- 发布：2024-01-09 09:10
- 更新：2024-07-18 14:33
- 阅读：844
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10 专业版 22H2
HBuilderX类型： 正式
HBuilderX版本号： 3.99
浏览器平台： 手机系统浏览器
浏览器版本： 各种手机浏览器
项目创建方式： HBuilderX
App下载地址或H5⽹址： 私密地址暂不上传，如有需要可联系邮箱ziqi1106@163.com
示例代码：
操作步骤：
<video :src="imgUrl" v-if="baseSetting.thumbType === '2'" style="width: 100%; height: 100%;" />
<video :src="imgUrl" v-if="baseSetting.thumbType === '2'" style="width: 100%; height: 100%;" />
预期结果：
手机端把视频第一帧作为封面图
手机端把视频第一帧作为封面图
实际结果：
手机端未显示封面图
手机端未显示封面图
bug描述：
uniapp video标签，不指定poster，H5服务在电脑的封面图是第一帧，在手机端则不显示封面图。
我认为在手机端不显示封面图是一个BUG。
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
使用 video 标签，不设置 poster运行在 h5 平台，经过测试 小米自带的浏览器显示为黑色，alook 浏览器可以自动展示 poster，在微信中打开也不展示 poster。
初步认为这个受到宿主浏览器的影响，和 uni-app 关系不大。
建议：为了在不同浏览器上表现一致，建议设置 poster 地址
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
刚才提到了我使用不同的浏览器测试出了不同的效果，这个主要是不同浏览器的默认表现不一样，你可以自行判断是否绕过这个问题，提供统一的 poster 是其中一种方式。
1***@qq.com
我视频是循环出来的，是评论上传的视频。展示评论，没法设置poster
2024-07-18 13:24