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

陨落大魔王

已于 2022-06-30 15:30:08 修改

阅读量3.6k

点赞数 3

文章标签：移动端视频上传 opacity 手机兼容性视频预览

于 2022-06-30 10:55:22 首次发布

本文链接：https://blog.csdn.net/m0_54364474/article/details/125535773

版权

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

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

陨落大魔王

关注关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
9
评论
移动端video标签第一帧显示空白问题

video视屏第一帧无法显示解决方案
复制链接

扫一扫

iOS 使用GPUImage录制实时视频第一帧黑屏的解决办法

Enjolras1024的博客

06-21

3620

最近使用GPUImage做实时视频滤镜, 发现保存下来的视频第一帧会黑屏, 在网上找解决办法, 加入[self.videoCamera addAudioInputsAndOutputs]可以解决录制的时候闪一下黑屏, 但是保存的视频还是会有问题, 最终在这里找到解决办法。附手动导入GPUImage方法: 1. 把GPUImage.xcodeproj 拖到你的Xcode project

前端小知识(四)：video视频获取第一帧作为展示

最新发布

Dwa_ww的博客

05-27

675

移动端h5video视频展示空白问题，添加第一帧作为展示

9 条评论您还未登录，请先登录后发表或查看评论

记一次canvas画出video第一帧出现的灾难

weixin_43331469的博客

09-02

1341

首页说出现的问题：根据video的loadeddata事件的触发来绘制第一帧，但是绘制出来总是黑屏解决：后来发现video加上preload属性等于auto就可以绘制成功了。代码： function getVideoBase64(url) { return new Promise(function (resolve, reject) { var dataURL = ''; const video = document.createElement("video"

h5 video 手机显示第一帧_解决h5嵌入app后video标签poster不能显示视频第一帧（表现为空白）...

weixin_35786759的博客

12-24

2560

这里我们先来描述一下问题，页面中使用了video标签，按照video标签的官方介绍下图介绍：没有设置poster的情况下在浏览器中我们可以看到视频的第一帧，页面效果如下图左图所示；但是嵌入App后，右面的样子：　这个时候我能想到的就是设置一下 poster 为某张固定图片，看看是不...

移动端使用原生video标签不显示第一帧问题

m0_57121248的博客

09-12

1308

移动端不显示第一帧问题

video标签的preload属性，设置为meta时，移动端显示白屏，有大佬知道怎么解决吗

u014513201的博客

12-27

4176

如题，设置preload为meta后，pc端video可以加载出海报，移动端却不行

uniapp 视频video 播放白屏 android

Li_Tao00的博客

12-24

3434

uniapp 视频video 播放白屏 android，网页视频无法全屏

video标签自动播放视频和移动端封面空白问题解决

热门推荐

彭世瑜的博客

10-10

2万+

微信端和手机浏览器显示如下。通过css隐藏下载按钮。

微信浏览器video标签没有封面_微信h5页面video标签用法总结

weixin_39788572的博客

12-18

1896

最近做的些web页面,内嵌许多小视频，在ios和安卓手机上播放时，遇到不少问题：在微信浏览器内播放时，视频会自动全屏如果每个视频都有一张自定义的图片作为封面，在显示视频的同时，如果没有给这个视频设置高度，视频的容器在安卓手机上会被视频的封面撑大到变形解决办法：给video标签加一些属性，调用h5原生video，我写了个例子，加了注释，如果有错误，烦指正，谢谢！width="100%"　　　heig...

移动端视频video封面无法显示

weixin_44425559的博客

09-10

4450

** 移动端无法自动获取封面 ** 网上的办法几乎试了遍，没什么有用的。最后还是加了封面图。不过100多个视频，不可能一个一个的去截图视频封面。用代码遍历了所有的视频。最后获取了base64，来当视频封。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>capture screen</title> </head> <body&g

HTML5 页面video标签视频加载播放空白

bug如沙 , 汇成撒哈拉

11-13

2万+

bug现象 : 空白原因 : video标签不支持我自己视频的编码格式注: 此处所说的编码格式不是指文件后缀 mp4 , RMVB , avi等 , 同一种后缀视频也会有不同编码格式 video标签支持的视频编码格式如下 , 借鉴网址:https://blog.csdn.net/houerfei/article/details/53264083 搜索下载了一个&lt...

WebApp - 解决 IOS（H5）Video 标签页面上下滚动白屏问题

牧码的博客

11-11

2397

问题定位之前用了 better-scroll（本质 transform）（猜想 IOS 和 transform 兼容问题）插件，和 video 标签不明觉厉地冲突，导致IOS（H5）Video 标签页面上下滚动白屏问题，Android 很乖，不搞事情。解决办法只要去了 better-scroll，用原生滚动条替代即可，这样就避免了 IOS 和 transform 兼容问题，自......

获取视频第一帧解决移动端video未设置视频封面不显示的问题

boerse的博客

06-09

6055

video/asfas.mp4—视频链接后加—?vframe/jpg/offset/n 注意只能获取前4帧 n<=5

小程序video视频组件封面显示失效问题

菜鸟老五

04-20

1万+

/（这里注意，它会覆盖掉视屏，但是不会覆盖播放按钮，在video组件中给播放按钮添加一个单击事件bindplay="bindplay"）//这里是一个video组件，但是因为video视屏组件的封面属性闪现失效问题，相信很多制作或者学习小程序的同行可能会遇到这个问题，话不多说，上解决办法。相信很多制作或者学习小程序的同行可能会遇到这个问题，话不多说，上解决办法。//我在video组件中写了一个cover-view。video概述：解决封面失效/适配问题。

H5 video获取第一帧作为 poster 属性

才华有限的博客

02-27

7067

demo测试在菜鸟安卓测试正常.但是 ios 中的video 只有视频在播放的时候，才临时去加载视频。所以是空白的一个播放按钮. 如果真的需要做.需要自定义video. H5 的 video 兼容实在麻烦… 细节如果需要获取第一帧设置进去: poster=“img_the_scream.jpg” 这个属性不能不设置也不能为空设置为 poster="…" 都可以.为空会无法设置 <...

VUE前端界面在iOS中遇到的坑

Wangdr的博客

05-28

1126

原文地址

gif 去除空白帧帧数调整

宝码香车的博客

08-30

691

1. 1.把gif转成一组有序列且命名好的图片把gif通过2345看图王保存（保存所有帧）成有序列的图片这时所有的图片就被保存下来了现在可以删除不需要的图片列如5_1.jpg 5_2.jpg 2.打开ps进行调整并生成新的gif 图打开ps, 文件 -> 脚本 -> 将文件载入堆栈这时所有的图片就载入ps中了 ...

移动端video标签封面

09-30

移动端video标签可以通过设置封面来显示一个海报图像，以填充视频播放区域。您可以使用poster属性来指定封面图像的URL。例如，在video标签中添加poster属性，并将其值设置为封面图像的URL，如下所示： <video src="xxxx/xxx.mp4" poster="image.png"></video> 这样，当视频加载之前，封面图像将显示在视频播放区域。一旦用户点击播放按钮，视频将开始播放，封面图像将被视频内容替换。如果您想隐藏移动端video标签的下载按钮，您可以使用一些CSS样式来实现。下面是一个示例的CSS代码，它可以隐藏下载按钮： video::-webkit-media-controls { overflow: hidden !important; } video::-webkit-media-controls-enclosure { width: calc(100% - 32px); margin-left: auto; } 这段CSS代码将隐藏下载按钮，并将视频播放区域的宽度调整为去除下载按钮后的宽度。希望这些信息对您有所帮助！