前些天,朋友遇到一个小程序的问题叫我帮忙看看,说是ios上video组件会有严重的黑屏现象,这就有意思了。

知道问题后,我就开始试一试,发现如果页面只有一个video组件的话,是没有什么问题的。但是但页面有多个video的时候,问题就有点严重了:

1、设置了播放方式为非自动播放,但是进到页面的是还是时不时有一两个会自动播放

2、卡,页面很卡

3、进入全屏的时候,视频方向是根据宽高自己适配,但是退出全屏的时候,会出现这种情况:刚刚视频是横屏播放,退出了页面也是横屏

4、退出全屏后,页面上除了刚刚那个播放的video还是正常的,其他全黑了

鼓捣了两个晚上,终于解决了

>页面卡顿的问题在video组件上通过添加 custom-cache="{{false}}" 解决

重点描述后面两个的解决过程:

1、第一次:设置video全屏播放的方向,失败;

2、尝试把组件的全屏按钮隐藏,然后自己写个按钮去调用video全屏的api,失败;

3、既然这两个都不行,那我看看别人是怎么做的,百度了一番,没有找到好的答案。灵机一动想起来微博还有个小程序,嘿嘿嘿,去偷师。

发现微博是这样的,他的视频列表并没有直接播放的功能,而是跳去一个页面上播放。好像很有道理样子,Have a try!

  把页面上的video统统禁用播放,去掉控制条,然后在上面建个播放按钮的层,点击播放按钮的时候在当前的页面上弹出一个层来放video播放,记得这个层要给一个关闭按钮。

  实践证明这个是可行,没有黑屏的情况了,成功,一顿饭到手

转载于:https://www.cnblogs.com/PeggyChan/p/11401788.html

跳出小程序 video组件 卡顿、黑屏、全屏等坑相关推荐

  1. 微信小程序 video 视频播放卡顿

    m3u8是一种索引文件,本质上是存放的对应服务器上的视频网络地址.微信小程序使用这种作为视频源可以完美解决卡顿的问题. 手机上传到服务器的视频大部分格式是mp4的,这里服务器可以把mp4转换成m3u8 ...

  2. 微信小程序scroll-view滑动卡顿,下滑时向上滑动失效

    微信小程序scroll-view滑动卡顿 滑动卡顿 解决方案 代码实现 wxml文件 js文件 滑动卡顿 微信小程序scroll-view组件在滑动时频繁卡顿,向下滑动时,向上滑动无效,无法停止.小程 ...

  3. uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题

    如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...

  4. 微信小程序video组件调用腾讯视频的解析

    1.首先我们从腾讯视频网站上找到一个视频网页的连接,格式是这样的 https://v.qq.com/x/page/b0136et5ztz.html 上面我加粗的是视频的vid 2.我们把vid放到接口 ...

  5. 微信小程序video组件调用腾讯视频的解决方案

    最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下. 对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的. 对方提供的视频链接: https ...

  6. 微信小程序安卓视频播放卡顿问题

    在微信小程序开发中遇到在video组件的两个问题 1.安卓手机里播放视频会有明显的卡顿问题 刚开始以为是网络问题,或者是视频文件问题.排查了一下发现都没问题 最后加了个属性就OK了 uniapp和原生 ...

  7. 微信小程序 - video组件poster无效 / 视频播放列表

    在做有关微信小程序有关视频播放页面的时候,遇到video组件设置poster无效果,然后查了下poster属性:视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 pos ...

  8. 微信小程序上下滑动卡顿 z-index设置不起作用

    今天在尝试做个微信小程序时,在开发测试时好好的,但发到真机上测试时手势上拉下拉都感到明显的卡顿,底部的菜单也没有浮在最上层.经过查找最后发现问题出现在图片上,在添加图片时看文档, 当时看了一下也没有细 ...

  9. 微信小程序video组件播放不了

    最近使用小程序的video组件,视频无法播放,报错The elemen has no support sources: 原因video组件只支持视频源的文件,必须是.mp4或者其他指向视频源的链接,如 ...

最新文章

  1. java安全编码指南之:堆污染Heap pollution
  2. 算法导论中求解时间复杂度的三种方法
  3. WPF 仿IPhone滑块开关 样式 - CheckBox
  4. 8086汇编复习1 - 并使用emu8086模拟器查看效果
  5. java 通信层_Android native进程间通信实例-binder篇之——HAL层访问JAVA层的服务
  6. StringWriter/PrintWriter在Java输出异常信息中的作用
  7. P5091-[模板]欧拉定理
  8. linux开机出现一下错误Give root password for maintenance (or type Control-D to continue):
  9. GPS无线视频服务器,宏电环卫车无线视频监控与GPS定位系统设计方案.docx
  10. JQuery AJAX 加载 HTML代码“lt”形式的。怎么解析成形式,并且把img解析成图片输出到浏览器中。...
  11. 2-1 git合并 打tag
  12. java泛型方法实现数值类型加法
  13. Request请求转发
  14. 算法很美 笔记 3.查找和排序
  15. t6客户端找不到服务器,请求帮助:用友T6服务器已安装完,服务器能正常登录。但是客户端登不上。客户端提示“不能登录到服务器---请检查T6管理服务是否已启动”。请问怎么解决?...
  16. GIC 基础知识介绍 (一)
  17. 学习微博中情感分类的句子表达(NLPCC2013)
  18. 单片机c语言1ms 2ms 4ms方波,定时器使用:利用单片机内部定时器0通过P1.0端口输出一定周期的方波信号。 - 试题答案网问答...
  19. CTK框架——CTK Widgets快速入门
  20. 【Python技能树共建】Python爬虫模拟登录

热门文章

  1. Latex学习(脚注)
  2. 微信小程序日期选择器
  3. Docker之几种storage-driver比较
  4. RabbitMQ消息队列(二):”Hello, World“
  5. 教你破解XP系统Administrator权限
  6. 在vim粘贴系统剪切板里的内容
  7. 为什么 wait 方法要在 synchronized 中调用?
  8. 基于 Spring Boot 的 Restful 风格实现增删改查
  9. Visual Studio Code高效开发----自动保存设置方法
  10. 微服务(Microservices)【翻译】