video播放加载比较慢，一开始会出现黑屏, 请问如何预加载或者消除黑屏呢
本来实现的思路是监听播放播放进度progress, 视频播放时候再去隐藏封面图, 但是progress在IOS却不可以执行,
所以出现封面图效果之后还有等待一会黑屏加载视频, 才能出现视频的画面
<video ref="myVideos" id="myVideo" :src="this.src" @play="playIng" :loop="true" :enable-progress-gesture="false"
:page-gesture="false" :initial-time="0" :controls="false" :show-fullscreen-btn="false" auto-pause-if-open-native="true"
:codec="'software'" @loadedmetadata="loadedmetadata" @progress="progress" @timeupdate="timeupdate" :objectFit="'contain'"
:show-center-play-btn="false" :style="boxStyle" :show-loading="false" :play-strategy="1">
<image v-if="!closeimg" class="videoImg" :src="cover" resize="contain" :style="boxStyle"></image>
</video>演示视频:
http://yiguilanqier.oss-cn-beijing.aliyuncs.com/1617553335856.mp4
!
9 个回复
废喵 (作者)
演示视频 有办法监控视频画面出现么?
DCMarvel
poster
废喵 (作者)
用poster也一样有这个问题, 会先出现poster, 再黑屏, 然后才出现画面
2021-04-11 22:14
DCMarvel
回复 废喵: 如果达不到想要的要求,试试AliPlayer,如果可以顶顶https://ask.dcloud.net.cn/article/38872 ,促进官方的更快引入
2021-04-12 08:55
风云杭州
uniapp的video组件视频加载貌似是要比 浏览器加载视频要慢。
不过你这个问题可以通过cover-image来先解决
废喵 (作者)
现在就是用cover-image上面有个封面图, 想等待画面出现再移除封面图, 但是不知道画面什么时候出现
2021-04-11 22:08
风云杭州
回复 废喵: 在 timeupdate(e) 判断下就可以了。。当初我也摸索了不少时间才搞定
2021-04-11 23:22
风云杭州
如果还有问题，可以加我微信交流
2021-04-11 23:53
林更新
v-show 参考小程序里有个视频情况的api
废喵 (作者)
v-show也一样不行, 小程序很好,没有黑屏加载问题, APP才有, 看到官方demo也有黑屏问题
2021-04-11 22:15
速翔网络
APP用原生，其他用video标签。我做视频APP的，目前用的是这个方案。
废喵 (作者)
uniapp不能用其他代替video么? 有的视频黑屏缓存可能是300-1200ms. 加个300ms延迟有的会黑屏, 如果用1.2秒延迟又等太长了, 看视频感觉就少了前面一节
2021-04-15 21:19
速翔网络
如果黑屏不确定什么时候出现，可以考虑加一个延迟300毫秒来解决
风云杭州
那会出现视频有声音但画面还是封面的情况吧？
2021-04-15 13:54
2***@qq.com
延迟500毫秒再调play() 效果会好很多
7***@qq.com
我看演示视频那个就很nice了啊，上滑的时候就已经出现下个视频得封面了
战力不足五 - .......
嘿嘿 ，你也在做短视频啊 。可以明确的告诉你 ，官方的video不行哦 。 短视频 最基础的要求就是预加载 跟缓存 官方的都不支持 ，我都是自己用的腾讯的原生播放器
7***@qq.com
貌似有个http-cache可以缓存。
2021-08-01 22:07
战力不足五
回复 7***@qq.com: 没用的 ，他这个缓存 是在视频播放后缓存，而且 限制是100M，
2021-08-04 11:22