video.js全屏bug&隐藏添加全屏按钮

JavaScript047

video.js全屏bug&隐藏添加全屏按钮,第1张

最近项目中接入 video.js 框架,在安卓机上 全屏 时, 有声音无画面

通过调试,发现在全屏后,video标签 width &height 均为0,

经过查看video.js官网文档,检查播放器实例配置,无误,Google各种方案无果。

果断放弃video自带的全屏方案。

通过修改video标签旋转,按宽高比放大视频至设备屏幕宽高

此时可以实现全屏效果。

但是问题又出现了,手机的20px的 状态条 仍旧在 =_=#

可以结合cordova插件 cordova-plugin-statusbar 插件实现。

【插件地址 传送门】

至此,曲线救国,问题修复。

screenfull.js监控全屏状态,但是试了一下,isFullscreen的状态在全屏之后是true,ESC退出全屏之后状态没有改变,于是上网搜了一下,大多是让window.onresize 监听全屏状态:

实际上screenfull有个onchange事件,在这里维护全屏状态就行了:

特此记录

当前窗口的宽度和高度啊

网页可见区域宽:document.body.clientWidth

网页可见区域高: document.body.clientHeight

或者

屏幕可用工作区高度: window.screen.availHeight

屏幕可用工作区宽度: window.screen.availWidth