移动端video标签第一帧显示空白问题

这个确实是个坑，昨天在移动端项目上做了一个视频上传的功能，写完之后电脑上测试正常，效果如下：

可在手机上却是这个效果，视频显示空白,要点击播放后才有用图片，这样子上线是肯定不行的

当时查了很多文档，以为是poster 的问题，后面加了之后发现没有效果。

最后无意间发现,只要在标签上加上opacity属性等于 0.99,就可以完美解决这个问题

<video :src="video.fileUrl" width="320" height="240"  controls style="opacity: 0.99"></video>

移动端video标签第一帧显示空白问题相关推荐

移动端video标签适配
video 标签在移动端的适配,折腾了几天.主要问题是移动端的video并没有像pc端上在dom加载完会加载视频内容,导致了移动端的视频播放延迟以及video的黑屏问题.解决办法一开始尝试了网络说的c ...
js 将video的第一帧转为图片
是通过video和canvas两个html5的标签实现的首先在缓存创建这两个标签 let canvas = document.createElement('canvas') let video = ...
video标签设置不显示播放条
video标签设置不显示播放条 css: video::-webkit-media-controls { /*不显示时间条*/object-fit:fill; /*设置预览图铺满*/display:n ...
h5 video 手机显示第一帧_解决h5嵌入app后video标签poster不能显示视频第一帧（表现为空白）...
这里我们先来描述一下问题,页面中使用了video标签,按照video标签的官方介绍下图介绍: 没有设置poster的情况下在浏览器中我们可以看到视频的第一帧,页面效果如下图左图所示:但是嵌入App后, ...
h5 video 移动端视频添加第一帧作为播放前图片
第一步:添加视频video标签,添加src, poster,controls属性第二步:poster = src的值 + '?vframe/jpg/offset/1' 这样就可以显示视频第一帧图片了 ...
video添加第一帧作为播放前图片（此方法已失效）
第一步:添加视频video标签,添加src, poster,controls属性第二步:poster = src的值 + '?vframe/jpg/offset/1' 这样就可以显示视频第一帧图片了 ...
ios 微信端 video 标签兼容问题
已经证明好用的方法引用微信jssdk <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">< ...
uniapp中video标签设置controls显示问题
最近,在uniapp项目中设置了video的控制条controls='false'不显示,但是不生效,仍然显示,后来直接在样式中修改.uni-video-bar后才不显示: /deep/ .uni-v ...
H5 img标签图片无法显示或video标签视频无法显示解决方法
错误场景: 有时候复制网络上带图片的文章,或者抓取网络上视频的链接,放到自己的项目页面上展示时经常报错403,但是把图片或视频的链接打开时是正常的,如下. Failed to load resourc ...

移动端video标签第一帧显示空白问题

移动端video标签第一帧显示空白问题相关推荐

最新文章

热门文章