问题
最近项目中接入video.js框架，在安卓机上全屏时，有声音无画面。
问题分析
通过调试，发现在全屏后，video标签 width & height 均为0，
- 手动修改宽高，仍旧无画面。
- 通过伪类
:full-screen修改宽高， video标签宽高生效了，但是仍旧无画面。
#my-player:-webkit-full-screen { width: 100%; height: 100%; z-index: 2019;}
#my-player:-moz-full-screen { width: 100%; height: 100%; z-index: 2019;}
#my-player:-ms-full-screen { width: 100%; height: 100%; z-index: 2019;}
#my-player:-o-full-screen { width: 100%; height: 100%; z-index: 2019;}
#my-player:full-screen { width: 100%; height: 100%; z-index: 2019;}
经过查看video.js官网文档，检查播放器实例配置，无误，Google各种方案无果。
果断放弃video自带的全屏方案。
通过修改video标签旋转，按宽高比放大视频至设备屏幕宽高
var player = videojs("my-player", {
sources: [{
src: videoUrl,
type: "video/mp4"
}]
});
隐藏原有全屏按钮
// 隐藏原有全屏按钮
$(".vjs-fullscreen-control.vjs-control.vjs-button").css("display","none");
手动添加全屏按钮 并绑定开关全屏方法toggleFullScreen
// 手动添加全屏按钮
$(".vjs-control-bar").append('<button class="vjs-fullscreen-control vjs-control vjs-button" type="button" title="Fullscreen" aria-disabled="false" id="danmu_send_opt" onclick="toggleFullScreen()"><span aria-hidden="true" class="vjs-icon-placeholder"></span></button>');
自定义开关全屏方法
var isFullScreen = false;
function toggleFullScreen() {
var video = document.querySelector("#my-player");
isFullScreen = !isFullScreen;
const screen_w = window.screen.width;
const screen_h = window.screen.height;
if(isFullScreen) {
$("#header").css("display","none");
video.setAttribute("style",
"transform:rotate(90deg);"+
"width:"+ screen_w +'px;'+
"height:"+ screen_w +'px;'+
"postion:absolute;"+
"top:"+ ((screen_h - screen_w)/2 - 10) +'px;'+
"left:-"+ ((screen_h - screen_w) /2 - 10) +"px;"+
"z-index:2018;");
} else {
$("#header").css("display","block");
video.setAttribute("style",
"transform:rotate(0deg);"+
"width:"+screen_w+ 'px;'+
"height:150px;"+
"postion:absolute;"+
"top:0;"+
"left:0;"+
"right:0;");
}
}
此时可以实现全屏效果。
但是问题又出现了，手机的20px的状态条仍旧在 =_=#
当前目标： 隐藏掉20px状态条
可以结合cordova插件 cordova-plugin-statusbar 插件实现。
【插件地址 传送门】
main.js中添加如下代码
document.addEventListener('deviceready', function() {
StatusBar.hide();
},alse）
至此，曲线救国，问题修复。
