uniapp的video组件视频预览略缩图问题

工作记录

视频预览时，会生成一个缩略图，播放按钮和视频长度为白色。放缩略图为白色时，播放按钮和视频长度看不清，所以需加个背景

加了背景效果：

解决：
controls设置为true,去掉poster属性。poster：设置缩略图，不设置时，视频会抽取第一帧作为缩略图
原代码：

<video id="myVideo" class="video" @loadedmetadata="loadedmetadata" :src="videoInfo.attachLink"@error="videoErrorCallback" object-fit="cover" :title="videoInfo.templateName"  :poster="videoInfo.templateCover"></video>

修改代码

<video id="myVideo" class="video" @loadedmetadata="loadedmetadata" :src="videoInfo.attachLink"@error="videoErrorCallback" object-fit="cover" :title="videoInfo.templateName" ></video>

uniapp的video组件视频预览略缩图问题相关推荐

访问阿里云存储的图片URL实现在网页直接预览略缩图而不直接下载
在做谷粒学院项目时候,因为老师没有做轮播图的后台前端,这里我自己实现了一下,遇到一个问题,我先做出轮播图列表来: 这里阿里云存储的图片URL直接展示出来了,我觉得这里应该显示图片更好, 后来在网页里使 ...
短视频APP开发制作—生成视频封面、略缩图
在短视频App开发中,编辑短视频有很多重点功能,如视频滤镜.音乐混音.静态贴纸.加水印等,今天讲一讲如何使用腾讯短视频sdk获取视频封面或略缩图. 首先,初始化控件,设置必要配置: mTXVideoE ...
antd vue upload组件上传视频并实现视频预览
antd vue upload组件上传视频并实现视频预览 html代码 <form><a-form-itemlabel="商品视频":labelCol=" ...
tinymce编辑器上传本地视频预览
小白一枚,最近搞搞tinymce编辑器上传视频预览,视频标签变成了图片标签问题,看看之前其他博主的说明,感jio好麻烦,官网的也没整明白,所以自己瞎整整.勿喷!勿喷!勿喷!重要事情说三遍首先是在ti ...
电脑摄像头未能创建连接服务器,Win7中摄像头提示未能创建视频预览错误怎么办...
最近有不少用户在我们网站上提问说他们在打开摄像头的时候,就会遇到打开摄像头的时候提示"未能创建视频预览,请检查设备连接"的问题,这是怎么回事呢,出现这样的原因的话有可能是电脑中毒了 ...
电脑摄像头未能创建连接服务器,Win7摄像头提示＂未能创建视频预览＂的原因及解决方法...
在Win7系统中打开摄像头,出现提示"未能创建视频预览,请检查请检查设备连接",出现这种情况,第一反应会认为摄像头坏了或者是电脑出问题了,如果不能确定,我们可以逐一进行排查,找出真 ...
iOS截取视频预览图，截图方向错误的解决
2019独角兽企业重金招聘Python工程师标准>>> 今天在修改项目bug的时候遇到了,截图视频预览图的时候总是方向不对,竖屏录制的视频(好像是竖屏录制截图出的错,记不太清楚了?) ...
android显示视频预览
android 11 kotlin显示视频预览权限读sd卡中的mp4文件的权限 <uses-permission android:name="android.permission. ...
电脑摄像头未能创建连接服务器,电脑提示未能创建视频预览,请检查设备连接的原因及解决办法...
电脑提示"未能创建视频预览,请检查设备连接"的原因及解决办法发布时间:2012-05-29 10:49:26 作者:佚名我要评论不知道大家有没有遇到这样的情况,当打开 ...

uniapp的video组件视频预览略缩图问题

工作记录

uniapp的video组件视频预览略缩图问题相关推荐

最新文章

热门文章