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

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

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

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

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

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

此时可以实现全屏效果。

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

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

【插件地址 传送门】

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

效果要求 ：按住按钮视频全屏播放，松开暂停；

iOS；

<video id="video" style=" object-fit: fill" preload="auto"  x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true" preload="auto" width=100%height=100%  src="图片地址"></video>

效果预览

android

<video id="video2" style=" object-fit: fill" preload="auto" autoplay="autoplay" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow" airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"  width=100%height=100%src="图片地址">  </video>

Android上不能像苹果一样在浏览器里内嵌播放视频，会加载一个视频播放器全屏播放；

效果预览

相关属性介绍 点击这里

object-fit介绍 点击这里

---