跳出小程序 video组件 卡顿黑屏全屏等坑

Posted 2022-08-17 peggychan

 

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

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

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

2、卡，页面很卡

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

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

 

 

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

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

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

1、第一次：设置video全屏播放的方向，失败；

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

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

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

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

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

 

。