在手机端上有兼容问题；无法正常全屏
TDPEACE opened this issue · 6 comments
👏 欢迎提出 bug 或者新的想法
全屏之后，无法正常播放，手机上出现黑屏只有声音没有画面的情况，非全屏使用正常，使用框架Ionic3+ng4
全屏之后播放器上的所有控件全部消失，但是在普通页面上全屏是可以正常的，解决之后回来更新issue
用了 larkplayer-ui 插件没呢？
通过 requestFullscreen 进入全屏还是点击 larkplayer-ui 上的全屏按钮
另外看下是不是由于播放器定位导致（position: absolute; top: xxx 等）的，有些浏览在全屏时会修改全屏元素的样式
用的是ui上的全屏按钮，播放器是全屏了的，但是出现了黑屏的情况，应该不是position的问题，元素上可以找到，但是全部看不见，包括我加了红色背景后还是无法显示，有的文章上说是要开启cup硬解可以解决黑屏的问题，这个问题别人也遇到过。。。我正在解决，解决问题后会过来更新。
我来更新了，问题已解决：
之前解决问题的时候思路：
比较正常页面和ionic项目里面不同，然后发现ionic项目里面父元素宽高没有写上去，全屏以后video元素还在，但是表现形式全部被吃掉。
后来去看了源码，可是并没有什么问题，我一直以为是源码和ionic代码起了冲突导致宽高没有写上去。父元素宽高为0.
然后就在页面上对元素进行调试。无意中勾选掉了（contain: strict;这个是ionic主动加在最外层ion-app，ion-page上的）意思是所有的包含规则应用于这个元素，等价于 contain: size layout style paint。
解决方法：在app.css里面讲contain：strice； ==》contain：none ！important；即可。
最后感谢 @dblate 。
好的 👍
对了，你们做的是什么产品啊？
主要做物联网，APP里面嵌入了阅读类，类似今日头条。